Vue生命周期指南

Posted on

最近开始学Vue,怎么学呢？从开始阅读官方文档开始吧，不得不说Vue官方文档写的真心不错,现在就让我们开始走进今天的Vue生命周期函数吧。

这是我个人Vue生命周期函数的总结，由于本人技术尚浅，哪里错误还请多多指出。

breforeCreate
created
beforeMount

// 进行初始化事件数据初始化，我么可以看到created已经和data数据绑定上了;

–> 首先会判断对象是否有el选项,如果有继续向下编译，如果没有则会停止编译,Vue的生命周期也就到此终结了。

–> 如果我们注释上面的el: ‘app’这段代码的话,Vue的生命周期也就到此结束了,说明这块是Vue初始化DOM的入口点；
也就是DOM的挂在点

–> 如果我们继续调用vm.$mount(el),Vue生命周期将会继续向下执行.

现在有一个问题，我们在生命周期函数中渲染template模板,会不会影响代码的加载时间呢？
请看该代码片段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const vm = new Vue({
    // el: 挂载点
    el: '#app',
    template: '<h1>{{message + " 这是模板代码片段 " }}</h1>',
    data: {
        return{
            message: '我是vue生命周期'
        }
    },
    created: {
       console.log(' create init ');
    },
    // ...
})

想想上面这段代码会怎么执行呢？
是这样的,vue生命周期函数中,首先会寻找挂载点也就是el元素，挂载到DOM，整个Vue生命周期开始

beforeMount和mounted分别有做了那些动作呢?
组件元素渲染,这时候数据已经挂载到DOM上了。

breforeUpdate 和 update
更新data里面的数据,渲染DOM

beeforeDestroy和Destory
这是Vue生命周期的最后阶段,一般我们会再这里去销毁组件,值得注意的是在brefore中我们还是可以正常组件实例的;

0%