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编辑  收藏  举报