Vue 2.0的学习笔记： Vue实例和生命周期

发布于大漠

7 年前

Vue实例是进入Vue的第一步，创建一个Vue的实例也是学习Vue的起点。实际上，Vue框架的入口就是Vue实例，其实就是框架中的View Model，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue实例虽然没有完全遵循MVVM模型，但Vue的设计无疑受到了它的启发。那么我们就从MVVM模型的概念开始，进入有关于Vue实例和生命周期的学习之旅行。

什么是MVVM

MVVM是Model View ViewModel的简写。维基百科是这样描述的：

MVVM 是 Martin Fowler 的 Presentation Model 设计模式的一个演变。和 Fowler 的 Presentation Model 一样，MVVM 抽象了 view 的状态和行为。但是，和 Presentation Model 抽象一个 view 不依赖于一个特定的UI平台的做法相反，MVVM是由微软WPF 和 Silverlight 的架构师Ken Cooper 和 Ted Peters开发，是一种简化用户界面的事件驱动编程方式。

Vue实例虽然没有完全遵循MVVM模型，但Vue的设计无疑受到了它的启发。用一张图来阐述，可能更清晰些：

Vue实例和生命周期

从图中我们可以清楚的得知，Vue实际上对应的就是MVVM中的VM，也就是ViewModel。因此在官方文档中经常可以看到vm这个变量名来表示Vue实例。

对设计模式多少了解的同学，应该知道View和Model是什么：

View：是看得到的，即视图，用到Vue的项目中来，它应该是“模板”。也就是用来挂载Vue实例的一个DOM元素，通常在项目根目录中index.html文件中出现，比如<div id="app"></div>。
Model：即模型（或数据），跟MVC中的Model一样，就是想要显示到模型上的数据，也是我们需要在程序生命周期中可能需要更新数据

在MVVM模型中，View和Model是分开的，两者不需要相互关心。但两者分开之后得通过ViewModel连接起来。比如：

let app = new Vue({
    el: '#app',
    data() {
        return {
            name: '大漠',
            count: 0
        }
    },
    methods: {
        increase: function () {
            this.count++
        }
    }
})

上面的代码中el:'#app'牵着View，data: {}牵着Model，而类似methods充当一个控制者（Controller）的角色，可以修改Model的值。

Vue的实例

简单的了解了MVVM的概念，我们开始来学习Vue的实例。事实上：每个Vue的应用都是通过Vue()函数创建一个新的Vue实例开始的。创建了一个Vue实例，其实就创建了一个ViewModel。

先来回忆JavaScript中的构造函数：

所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

比如：

function App() {
    // ...
}

我们知道App()是一个函数，在这个App()函数前加上new关键词，就把这个函数实例化了：

new App()

在Vue中，我们只需要直接new Vue()就可以实例化一个Vue对象：

let app = new Vue({
    // 选项
})

注意：官网方档用的是vm，出于个人爱好问题，我喜欢用app来表示。

在实例化Vue时，需要传入一个选项对象，它可以包含数据data、模板template、挂载元素el、方法methods、生命周期钩子等选项。在实例化Vue的选项时，需要特别注意的是含有this的函数，大多不要使用ES6箭头函数，因为我们期望this指向的是Vue实例。

创建一个Vue实例

创建一个Vue实例，大致会经过四个过程：

Vue实例和生命周期

首先通过关键语句new Vue()创建一个Vue实例app:

let app = new Vue({
    
})

这个时候，我们给Vue()传了一个空对象。在控制台上打印app，你可以看到这个Vue实例对应的参数：

Vue实例和生命周期

接下来，我们把新创建的Vue实例app挂载到一个DOM元素上：

let app = new Vue({
    el: '#app'
})

这个#app元素是HTML中的DOM元素:

<div id="app"></div>

Vue实例所有的东西都将在这个div#app里展示。

Vue实例和生命周期

接下来再给Vue实例中设置数据data。写法也很简单：

let app = new Vue({
    el: '#app',
    data() {
        return {
            name: '大漠'
        }
    }
})

Vue实例和生命周期

到这一步，万事具备，只欠东风了。Vue实例已经挂载到#app的DOM元素上，数据data也有了。最后需要将Vue实例中的数据绑定到指定的视图上，也就是数据渲染。

<div id="app">
    <h1>Hello! {{ name }}</h1>
</div>

使用文本插值方式，将数据中的name插入到对应的模板中。这个时候data中的name就在页面中成功的渲染出来子：

Vue实例和生命周期

事实上，在Vue的实例中，除了插入挂载元素、数据选项之外，还可以插入模板、方法和生命周期钩子等选项。这些选项，当然你可以通过扩展Vue构造器来创建预定义选项的组件构造器：

let MyComponent = Vue.extend {(
    // 扩展选项
)}

let MyComponentInstance = new MyComponent()

Vue实例属性和方法

Vue实例属性和方法有很多：

点击这里可以浏览大图。

但我们经常会用到四个常用的参数选项，比如filters、computed、methods和watch等，对于其他不常见的属性和方法我们这里暂时不做阐述，后面的学习过程中会逐一介绍。

有关于常见的四个参数选项的使用，可以阅读下面的读书笔记：

Vue实例API

Vue实例自知带有很多API，这里简单的整理了相关的API：

点击这里可以浏览大图

除了上图罗列的API和属性以及方法中的API之外还有十个全局API和六个全局配置的API。先来看全局API的相应描述：

Vue.extend：使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象
Vue.nextTick：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM
Vue.set：设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开Vue不能检测属性被添加的限制
Vue.delete：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开Vue不能检测到属性被删除的限制，但是你应该很少会使用它
Vue.directive：注册或获取全局指令
Vue.filter：注册或获取全局过滤器
Vue.component：注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
Vue.use：安装Vue.js插件
Vue.mixin：全局注册一个混合，影响注册之后所有创建的每个Vue实例
Vue.compile：在render函数中编译模板字符串。只在独立构建时有效

六个全局Vue.config的API是：

Vue.config.silent = true：取消Vue所有的日志与警告
Vue.config.optionMergeStrategies.methods：自定义合并策略的选项
Vue.config.devtools = true：配置是否允许vue-devtools检查代码
Vue.config.errorHandler = function(err, vm){}：指定组件的渲染和观察期间未捕获错误的处理函数
Vue.config.ignoredElements = ['my-custom-web-component','another-web-component']：忽略在Vue之外的自定义元素
Vue.config.keyCodes：给v-on自定义键位别名

生命周期

Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

Vue实例和生命周期

注，上图来自于@老马自嘲的《Vue入门系列之Vue实例详解与生命周期》一文。

Vue提供的可以注册的钩子都在上图中红色框标注。他们是：

beforeCreate：在实例初始化之后，数据观测（Data Observer）和event/watcher事件配置之前被调用
create：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据(Data Observer)、属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见
beforeMount：在挂载开始之前被调用：相关的render函数首次被调用
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内
beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
updated：由于数据更改导致虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用
destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

来看一个生命周期的简单示例：

let app = new Vue({
    el: '#app',
    data() {
        return {
            name: '大漠'
        }
    },
    beforeCreate: function () {
        console.log('===== 创建前 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    created: function () {
        // 在实例创建之后同步调用
        // 此时实例已结束解析选项
        // 这意味着已建立：数据绑定，计算属性,方法，watcher/事件回调
        // 但是还没有开始DOM编译，$el还不存在，但是实例存在，即this.name存在，可以打印出来
        console.log('===== 已创建 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    beforeCompile: function () {
        console.log('===== 未开始编译 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    compiled: function () {
        // 在编译结束之后调用
        // 此时所有的指令已生效，因而数据的变化将触发DOM更新
        // 但是不担保$el已插入文档
        console.log('===== 编译完成 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    beforeMount: function () {
        console.log('===== Mount之前 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    mounted: function () {
        console.log('===== Mount完成 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    beforeUpdate: function () {
        console.log('===== 更新前 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    updated: function () {
        console.log('===== 更新完成 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    ready: function () {
        // 在编译结束和$el 第一次插入文档之后调用，如果在第一次attached钩子之后调用
        // 注意，必须是由Vue插入，比如 vm.$appendTo()等方法或指令更新，才会触发ready 钩子
        console.log('===== 一切都准备好了 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    attached: function () {
        // app.$appendTo('#app2')暂时触发不了，不知道怎么解决
        // 在 vm.$el插入DOM时调用。必须是由指令或实例方法，比如$appendTo()插入，直接操作vm.$el不会触发这个钩子
        console.log('===== 插入DOM成功 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    detached: function () {
        // 触发事件 app.$destroy(true)，其中参数true控制是否删除DOM节点或者app.$remove()
        // 在vm.$el 从DOM中删除时调用。必须是由指令或实例方法删除，直接操作vm.$el不会触发这个钩子
        console.log('===== 删除DOM成功 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    beforeDestroy: function () {
        // 触发方式，在console里面打印app.$destroy()
        // 在开始销毁实例时调用。此时实例仍然有功能
        console.log('===== 销毁前 =====')
        console.log(this.name)
        console.log(this.$el)
    },
    destroyed: function () {
        // 触发方式，在console里面打app.$destroy()
        // 其中app.$destroy(true)是删除DOM节点，会触发detached函数，但是实例仍然存在
        // 在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑
        // 注意是解绑不是销毁，所有的子实例也已经被销毁
        console.log('===== 已销毁 =====')
        console.log(this.name)
        console.log(this.$el)
    }
})

打印出来的结果：

Vue实例和生命周期

接着在控制台修改data的值，更新视图：

Vue实例和生命周期

这个时候触发beforeUpdata和updated。接着执行app.$destroy()：

Vue实例和生命周期

总结一下，对官方文档的那张图简化一下，就得到了这张图:

Vue实例和生命周期

注：上图来自@浅白的《Vue生命周期》一文。示例也参考此文。

仅这一点，还不足够我们彻底的理解和掌握Vue生命周期。但随着后面的学习，我们会慢慢的掌握生命周期中所有的知识点。

总结

这篇文章介绍了Vue的实例，简单的描述了Vue实例中的API以及如何创建Vue实例。最后用一张图简单的描述了Vue的生命周期。当然本文只是一个基本的介绍，如果要深入或者彻底的掌握相关的知识点，还需要不断的补充和学习。

由于作者也是Vue的初学者，如果文章中有不对之处，还请各咱大婶拍正，或者你有更好的经验，欢迎下面的评论中与我们一起分享。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.fedev.cn/vue/vue-instances-and-life-cycles.htmlNike React Element 87 Moss