VUE生命周期

生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程

例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等

同时在这个过程中会自动运行一些叫做生命周期钩子的函数，我们可以使用这些函数，在实例的不同阶段加上我们需要的代码，实现特定的功能

---

注意: 生命周期在未来的脚手架部分，同样有效

<div id="container">
    <p v-html="message"></p>
</div>

---

为了方便观看生命周期过程中的实例，可以定义如下方法

function showData(process, vm) {
    console.log(process)
    console.log("vue数据:", vm.message) // 当前Vue中的数据
    console.log("Vue挂载el:") // Vue接管的元素
    console.log(vm.$el) 
    console.log("真实Dom:")
    console.log(document.getElementById("container").innerHTML)
    console.log('-----------------')
} // 这个函数用来输出相关信息的

beforeCreate

数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象

beforeCreate: function () {
    showData("创建Vue实例前", this)
},

created

数据已经绑定到了对象实例，但是还没有挂载对象

created: function () {
    showData("创建Vue实例前", this)
},

beforeMount

模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的$el属性

$el属性是一个HTMLElement对象

也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

beforeMount: function () {
    showData("挂载到Dom前", this)
},

mounted

将$el的内容挂载到了el，相当于我们在jQuery执行了$(el).html($el)，生成页面上真正的dom

上面我们就会发现页面的元素和我们$el的元素是一致的

在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作

mounted: function () {
    showData("挂载到Dom后", this)
},

beforeUpdate

数据发生变化时调用

beforeUpdate: function () {
    showData("数据发生变化时", this)
},

updated

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

updated: function () {
    showData("数据发生变化后", this)
},

beforeDestroy

Vue实例销毁前

beforeDestroy: function () {
    showData("Vue实例销毁前", this)
},

destroyed

Vue实例销毁后

destroyed: function () {
    showData("Vue实例销毁后", this)
}

window.$vm.$destroy()