Vue

Vue的生命周期

学习Vue的生命周期

Posted by wangchong on April 1, 2019

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

Vue的生命周期可以大致分为四个阶段:创建->挂载->更新->销毁。

Vue声明周期图

由上面图可以看出,每个阶段都有与之相对应的钩子函数,可以让我们进入到Vue实例的各个阶段去做我们想做的事情。

vue步骤

  1. 创建Vue实例。
  2. 初始化events。
  3. 执行beforeCreate钩子函数。
  4. 初始化injections(父组件向子组件注入值)。
  5. 执行created钩子函数。
  6. 判断Vue构造函数的参数是否存在el属性,如果有进入下一步;如果没有判断vue实例的$mount(el)是否挂载了DOM元素,如果有进入下一步。
  7. 判断是否存在template属性,如果有则将template注入到渲染函数;如果没有,将el元素的htm编译成template。
  8. 执行beforeMount钩子函数。
  9. 创建vm.$el并把DOM元素el替换掉。
  10. 执行mounted钩子函数。
  11. 检测DOM发生变化,如果data发生变化就开始执行beforeUpdate钩子函数。
  12. 生成新的Virtual DOM 通过diff算法和旧的Virtual DOM进行比较,计算出最小化变化,然后更新。
  13. 执行updated钩子函数。
  14. 当执行vm.$destroy销毁组件的时候,执行beforeDestroy钩子函数。
  15. 移除掉Watchers、子组件和事件监听。
  16. 执行destroyed钩子函数。

生命周期钩子函数

Vue的生命周期有8个钩子函数:

  1. beforeCreate:实例已经被创建,data中还没有数据。
  2. created:实力已经被创建,data中的变量还没渲染到模板中。
  3. beforeMount:实例挂载DOM元素之前。
  4. mounted:实例已经挂载到DOM元素上。
  5. beforeUpdate:实例更新之前。
  6. updated:实例更新之前。
  7. beforeDestroy:实例销毁之前。
  8. destroyed:实例销毁。
<script>
export default {
    data(){
        return {
            msg : "测试",
    
        }
    },
    beforeCreate(){
        console.log("实例已经创建,data中还没有数据");
        console.log(this.msg);
    },
    created(){
        console.log("实例已经创建,msg变量还未渲染到模板");
        this.msg = 222;
    },
    beforeMount(){
        console.log("实例挂载dom元素之前");
    },
    mounted(){
        console.log("实例已经被挂载到dom元素上");
        this.msg = 2000;
    },
    beforeUpdate(){
        console.log("实例更新之前");
    },
    updated(){
        console.log("实例更新之后")
        let _self = this;
        console.log(this);
        setTimeout(()=>{
            _self.$destroy();
        },4000)
    },
    beforeDestroy(){
        console.log("实例销毁之前")
    },
    destroyed(){
        console.log("实例销毁")
    }
}
</script>