生命周期函数

vue生命周期钩子
=生命周期函数
=生命周期事件
与EL DATA METHODS 平级
创建阶段的4个生命周期

  beforeCreate(){//表示刚初始化了一个Vue空的实例对象，这时候，这个对象身上，只有默认的
            //一些生命周期函数和默认的事件，其它的东西都未创建
            //在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化
            /*console.log(this.msg)
            this.show()*/
            //this.msg  undefined
            /*cannot find prototype show*/
        },
        created(){//第二个生命周期函数
            console.log(this.msg);
            this.show();
            //在created中， data和methods都已经初始化好了
            //如果要调用methods中的方法 或者 data中的数据 最早只能在created中操作
        },
        beforeMount(){//第三个生命周期函数 表示模板已经加载完成。但是还没有渲染到页面上
           // console.log(document.getElementById("h3").innerText)// {{msg}}
            //在beforeMount执行的时候，页面中的元素。还没有真正替换过来。值是之前写的一些模板字符串
        },
        mounted(){//第四个生命周期函数 表示 内存中的模板已经真是的挂载到了页面中，用户
            //已经可以看到渲染之后的页面
            console.log(document.getElementById("h3").innerText)
        }

如果要通过某些插件 操作页面上的DOM节点 最早要在mounted中进行
只要执行忘了mounted 就表示整个VUE实例 已经初始化完毕

组件运行阶段的生命周期函数

beforeUpadate(){}
upadated(){}

beforeMount(){//第三个生命周期函数 表示模板已经加载完成。但是还没有渲染到页面上
           // console.log(document.getElementById("h3").innerText)// {{msg}}
            //在beforeMount执行的时候，页面中的元素。还没有真正替换过来。值是之前写的一些模板字符串
        },
        mounted(){//第四个生命周期函数 表示 内存中的模板已经真是的挂载到了页面中，用户
            //已经可以看到渲染之后的页面
           // console.log(document.getElementById("h3").innerText)
        },

这两事件 会根据 data数据的改变 ，有选择性的触发 0 次 到多次

当数据进行更新的时候， 先根据data中最新的数据， 在内存中。重新渲染出一份最新的 内存DOM树 重新渲染到真实的页面中去， 这时候，就完成了数据 从 data（model层）->view （视图层） 的变化

当新的DOM树更新完成之后，还没有渲染到页面之前 会执行beforeUpdate钩子函数
当真实页面渲染成功之后，就会执行updated函数

当执行beforeDestroy的时候 Vue实例已经从运行阶段 进行到了销毁阶段，但是实例身上所有的methods，以及过滤器 指令... 都处于可用状态 此时 还没有真正执行销毁的过程

当执行到destroyed函数的时候，组件已经完全被销毁了 此时， 组件中所有的数据，方法，指令， 过滤器，所有的东西都已经不可用了

beforeDestroy(){}
destroyed(){}

完整代码

    
    
    



    
    
{{msg}}