Vue的生命周期

Vue生命周期钩子函数：

　　beforeCreate函数：

　　在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

　　created函数：

　　在实例创建完成后被立即调用，在这一步，实例已完成一下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

　　beforeMount函数：

　　在挂载开始之前被调用：相关的render函数首次被调用，该钩子在服务器端渲染期间不可被调用。

　　mounted函数：

　　在挂载开始之后被调用。

　　beforeUpdate函数：

　　数据更新时调用，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

　　updated函数：

　　由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

　　beforeDestroy函数：

　　实例销毁之前调用，在这一步，实例仍然完全可用，该钩子在服务器端渲染期间不被调用。

　　destroy函数：

　　Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器渲染期间不被调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <p>{{name}}</p>
</div>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#d1",
        data:{
            name:"qingqiu",
        },
        //数据属性的声明：
        beforeCreate:function(){
            console.log("这是beforeCreate钩子函数");
            console.log(this.name)
        },
        created:function () {
            console.log("这是created钩子函数");
            console.log(this.name);
        },
        // 挂载之前表示：没有将data中的数据内容渲染到Vue实例中
        beforeMount:function () {
            console.log("这是beforeMount钩子函数");
            console.log(document.getElementById("d1").innerText)
        },
        // 挂载之后表示：将data中的数据内容渲染到Vue实例中
        mounted:function(){
            console.log("这是mounted钩子函数");
            console.log(document.getElementById("d1").innerText);
        }
    })
</script>
</body>
</html>

 

posted @ 2018-07-26 17:41  Qingqiu_Gu  阅读(129)  评论(0)  编辑  收藏  举报