2.2 Vue实例介绍

Vue应用的开发离不开Vue实例，下面笔者将创建一个简单的Vue实例并观察实例从创建到销毁的完整生命周期。

2.2.1 简单实例

一个简单的Vue实例，代码如下：

     <div id="app">
       <h1>{{ title }}</h1>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></
     script>
     <script type="text/javascript">
       var vm = new Vue({
         el: '#app', // 绑定（mount）到DOM上
         data () {
            return {
              title: 'Hello World'
            }
         }
       })
     </script>

在这个实例中，笔者初始化了带有title数据的vm对象，并将其绑定到id为app的DOM节点上。

初始化时，在实例上绑定的常规数据对象会被Vue转化为被观察的拥有可响应行为的对象。简单地说，就是当数据发生变化时，会同步更新其数据链和作用域中所有的相关状态。最常见的情况就是，当实例数据发生变化时，视图也随之改变，如图2.6所示。

2.2.2 生命周期

Vue实例在初始化时需要经历一系列过程，比如编译模板、渲染虚拟DOM树、将实例挂载到DOM上、设置数据监听和数据绑定等。在这些过程中也会运行一些钩子函数，允许开发者在不同的阶段注入自己的代码。

下面，笔者将上一小节中的简单实例稍微改造一下，为其绑定钩子函数并打印标识信息，用以观察这些钩子函数执行的时机。

改造后的实例代码如下（关于Vue的语法，笔者将在之后的章节中详细讲解）：

     <div id="app">
       <h1>{{ title }}</h1>
       <button @click="randomTitle()">改变title</button>
       <button @click="destoryVm()">销毁实例</button>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.
     js"></script>
     <script type="text/javascript">
       var vm = new Vue({
         el: '#app',   // mount到DOM上
         data () {
            return {
              title: 'Hello World'
            }
         },
         methods: {
            randomTitle () {
               this.title = 'Hello ' + ['China', 'World', 'Universe'][Math.
     floor(Math.random() * 2.999)]
            },
            destoryVm () {
              this.$destroy()
            }
         },
         // 实例初始化之后，数据观测和事件绑定之前
         beforeCreate () {
            console.log('before create')
         },
         // 实例初始化完成，挂载尚未开始时
         created () {
            console.log('created')
         },
         // 挂载之前，render函数首次被调用时
         beforeMount () {
            console.log('before mount')
         },
         // 在实例挂载到DOM节点上之后
         mounted () {
            console.log('mounted')
         },
         // 数据更新时，在虚拟DOM状态变化之前
         beforeUpdate () {
            console.log('before update')
         },
         // 虚拟DOM被重新渲染之后
         updated () {
            console.log('updated')
         },
         // 实例销毁之前，此时实例依然可用
         beforeDestroy () {
            console.log('before destroy')
         },
         // 实例销毁后，此时Vue实例及其子实例将完全解绑
         destroyed () {
            console.log('destroyed')
         }
       })
     </script>

刚打开页面，即Vue实例刚被创建并挂载到DOM上时，调用的钩子函数如图2.7所示。

当实例数据发生变化并触发视图更新时，调用的钩子函数如图2.8所示。

当实例被销毁时，调用的钩子函数如图2.9所示。

之后，多次点击“改变title”按钮，视图不再响应数据变化，如图2.10所示，因为此时节点上绑定的Vue实例已被销毁。

笔者参照官方译制了一份包含核心概念的生命周期图，如图2.11所示。现阶段，同学们只需要对此稍微了解即可，并不需要深入研究，这些并不影响你成为一名优秀的Vue开发者。本节的意图也只在于描述这样一个周期流程及于何时何处去使用这些钩子函数，对实现机制感兴趣的同学可以深入框架源码研究并欢迎随时通过邮件与笔者交流。

随着实战经验的不断累积，这张图或将对学习和开发产生更高的参考价值。