生命周期函数

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(){}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{msg}}</h3>
</div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'OK'
        },
        methods:{
            show(){
                console.log("执行了show方法");
            }
        },
        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)
        },
        beforeUpdate(){//这时候， 表示 我们的界面还有没有更新【数据 已经被更新了】
           // console.log(document.getElementById("h3").innerText)
           // console.log('data中的数据是'+this.msg)//当执行beforeUpdate的时候 页面中显示的
            //数据还是旧的，此时 Data数据是最新的 页面尚未和最新的数据保持同步
        },
        updated(){
            console.log(document.getElementById("h3").innerText)
            console.log('data中的数据是'+this.msg)
        }
    })
</script>
</html>

生命周期函数

推荐阅读更多精彩内容