一、组件化

    代码示例：

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <title></title>
    6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    7. </head>
    9. <body>
    10.     <div id="test">
    11.         <ol>
    12.             <todo-item></todo-item>
    13.         </ol>
    14.     </div>
    15. </body>
    16. <script>
    17.     //组件化
    18.     Vue.component('todo-item', {
    19.         template: '<li>这是个待办项</li>'
    20.     })
    22.     var test = new Vue({
    23.         el: '#test'
    24.     })
    25. </script>
    27. </html>

    演示:
    1.png
    进阶使用：

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <title></title>
    6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    7. </head>
    9. <body>
    10.     <div id="test">
    11.         <ol>
    12.             <todo-item v-for="item in testList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    13.         </ol>
    14.     </div>
    15. </body>
    16. <script>
    17.     Vue.component('todo-item', {
    18.         props: ['todo'],
    19.         template: '<li>{{todo.text}}</li>'
    20.     })
    22.     var test = new Vue({
    23.         el: '#test',
    24.         data: {
    25.             testList: [
    26.                 { id: 0, text: '啊' },
    27.                 { id: 1, text: '哦' },
    28.                 { id: 2, text: '嗯' }
    29.             ]
    30.         }
    31.     })
    32. </script>
    34. </html>

    效果：
    2.png
    二、实例

    创建实例：

    1. var test = new Vue({...})

    当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

    1. // 我们的数据对象
    2. var data = { a: 1 }
    4. // 该对象被加入到一个 Vue 实例中
    5. var vm = new Vue({
    6.   data: data
    7. })
    9. // 获得这个实例上的 property
    10. // 返回源数据中对应的字段
    11. vm.a == data.a // => true
    13. // 设置 property 也会影响到原始数据
    14. vm.a = 2
    15. data.a // => 2
    17. // ……反之亦然
    18. data.a = 3
    19. vm.a // => 3

    这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

    测试用例：

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <title></title>
    6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    7. </head>
    9. <body>
    10.     <div id="test1">
    11.         {{a}}
    12.     </div>
    13.     <div id="test2">
    14.         {{foo}}
    15.         <button v-on:click="foo = 'baz'">Change it</button>
    16.     </div>
    17. </body>
    18. <script>
    19.     var data = { a: 3 };
    20.     var vm1 = new Vue({
    21.         el: '#test1',
    22.         data: data
    23.     })
    24.     //freeze()
    25.     var obj = { foo: 'bar' }
    26.     Object.freeze(obj)
    27.     var vm2 = new Vue({
    28.         el: '#test2',
    29.         data: obj
    30.     })
    31. </script>
    33. </html>

    效果:
    3.gif
    三、实例生命周期钩子

    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

    比如 created 钩子可以用来在一个实例被创建之后执行代码：

    1. new Vue({
    2.   data: {
    3.     a: 1
    4.   },
    5.   created: function () {
    6.     // `this` 指向 vm 实例
    7.     console.log('a is: ' + this.a)
    8.   }
    9. })
    10. // => "a is: 1"

    也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

    下面是官方给的一张生命周期图示：

    4.png