Vue生命周期

Vue生命周期

vue生命周期介绍

生命周期的含义 从vue实例创建,运行 到销毁的期间,总是伴随各种各样的事件,这些事件统称为生命周期

生命周期解析图

vue生命周期详解

1.初始化阶段

beforeCreate:实例刚刚在内存中创建出来 还没有初始化无任何属性

created:实例已经在内存中创建完成,data和methods中的数据已完成，el已经生成了，但是因为需要挂载DOM节点，而DOM树还没生成，所以el还没有被赋值。

    let vm = new Vue({
        el: "#app",
        data: {
            msg: "hello",
            arr: [10, 20, 30, 40]
        },
        methods: {
            change() {
                this.msg = "你好";
            }
        },
        //	beforeCreate:组件实例刚被创建，无任何属性
        beforeCreate() {
            // console.log(this.$el);//undefined
            // console.log(this.$data);//undefined
            // console.log(this.msg);//undefined
            // this.arr[2] = 300;//报错：因为还没有生成data，vm中不存在arr私有属性
        },
 
        //组件实例创建完成，`data`和`methods`中的数据已完成，`el`已经生成了，但是因为需要挂载`DOM`节点，而`DOM`树还没生成，所以`el`还没有被赋值。
        created() {
            console.log(this.$el);//undefined
            console.log(this.$data);//{msg:"hello"}
            console.log(this.msg);//hello
            this.arr[1] = 200;
            //vm.arr=[10, 200, 30, 40,],已经生成了data和methods，可以修改vm的私有属性arr
        },
    })

2.渲染阶段

beforeMount 此时已经完成了模板的编译,只是没有渲染到界面中

mounted 页面渲染结束，到这里已经向页面中挂载完了数据，已经将vm中的msg获取到，并且挂载到{{msg}}上去

        // vm.arr = [100, 20, 30, 40], 修改了arr但是页面还没有被渲染
        beforeMount() {
            this.arr[0] = 100;
            //数据变了[100,20,30,40]
        },
        //在这两者之间，页面被渲染了[100,20,30,40]
        mounted() {
            this.arr[3] = 400;
             //数据变了[100,20,30,400]
            //但是页面已经渲染了，页面的显示仍然是[ 100, 20, 30, 40 ]
        },

3.更新阶段

• beforUpdate:界面中的数据还是旧的但是data的数据已经更新,页面中的data还没有同步
• updated:页面重新渲染完毕,页面中的数据data保持一致
• 中间处理过程:先将data中的数据在内存中渲染出一个新的dom,当新的dom数更新后,会重新渲染到界面中去,从而实现数据层和视图层的转换

    let vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods: {
            change() {
                this.msg = "hahaha";
            }
        },
        // - `beforeUpdate`:【==更新之前==】响应式数据变化了，但页面没变化
        beforeUpdate() {
            console.log(this.msg);
            console.log("数据变化了，页面没有变化");
        },
        // updated`:【==更新之后==】响应式数据变化了，页面也更新了
        updated() {
            console.log(this.msg);
            console.log("数据变化了，页面变化了");
        },
    })
 
    setTimeout(function () {
        vm.msg = "world";
    }, 1000)

4.销毁阶段

beforeDestroy:执行该方法的时候Vue的生命周期已经进入销毁阶段但实例上的各种数据处于可用状态

destroyed:组件已经全部销毁,Vue的实例已经被销毁,vue的任何数据都不可用,但是原来的样式保留

  let vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods: {
            change() {
                this.msg = "hahaha";
            }
        },
       //执行了vm.$destroy(),在这一步，实例仍然完全可用
        beforeDestroy() {
            this.msg = "lalala";
            console.log(this.msg);//数据变了，页面没同步
            this.$forceUpdate();//强制更新，失效
            console.log("销毁之前,还可以用data，menthods");
        },
       //执行了vm.$destroy(),到这一步，Vue的vm实例与视图的所有关系都解除了：指令都被解绑、事件监听器被移除、子实例也都被销毁
        destroyed() {
            this.msg = "one";
            console.log(this.msg);//页面不再更新了
            console.log(this.$data);
            console.log("销毁之后,保留原来的样式，不受vue控制了");
        }
    })
 
  
    let btn = document.getElementById("btn");
    btn.onclick = function () {
        vm.$destroy();//调用销毁
    }