Vue实例的生命周期

实例生命周期

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

<div id="app">
    <h3 id="h3">{{message}}</h3>
    </div>
var vm =new Vue({ el:"#app", data: { message:"Hello Vue", } })

在此期间要经历beforeCreate()，created()，mounted()，updated()，destroyed()等过程

创建期间的生命周期函数

beforeCreate()

在 Vue 实例创建前进行的生命周期函数，此时还没初始化好 data 和 methods 属性，即他们的值均不能被使用。

created()

在 Vue 实例创建后进行的生命周期函数，此时初始化好 data 和 methods 属性。如果要调用 methods 里的方式或使用 data 里的数据，最早只能在created()里使用。

beforeMount()

在created()之后beforeMount()之前，Vue 开始编辑模板，把 Vue 代码中的那些指令进行编译，最终会在内存中生成一个模板字符串渲染成 DOM，此时只是在内存中，并没有挂载到页面去。

在beforeMount()执行过程中,页面中的元素还未真正替换过来，若执行以下操作

Console.log(document.getElementById('h3').innerText);

则无法在页面上打印出“Hello Vue”。

mounted()

此时内存中编译好的模板真正地替换到了浏览器的页面中，也是实例创建间的最后一个生命周期函数，执行完mounted()表示实例完全创建好了。即可打印出”Hello Vue“。操作 DOM 元素最早在mounted()中操作。

运行期间的生命周期函数

beforeUpdate()和update()

当执行beforeUpdate()时页面上的数据是旧的，data 中的数据是新的，页面尚未和最新的保持同步。

---

执行完beforeUpdate()时，先根据 data 中最新的数据，重新渲染出一份最新的内存 DOM 树，再渲染到真实的页面中去，这时数据从 data(Model 层)->view(视图层)的更新。

update()

页面与 data 中的数据保持一致。

销毁期间的生命周期函数

beforeDestroy()和destroyed()

beforeDestroy()期间实例可用。

destroyed()期间实例完全销毁不可以。

---

后续

更多关于 Vues 生命周期函数可查看vue.js官网。

全部示意图