#### 1. 创建阶段 1. beforeCreate(): 第一个生命周期函数，此时获取不到data 2. created(): 这是我们遇到的第二个生命周期函数,在created中，data和methods都已经被初始化好了! 3. beforeMount(): 这是我们遇到的第3个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面 ``` console.log((document.getElementById("h1")).innerText); //{{msg}} ``` 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串 4. mounted(): 第四个生命周期函数，表示，内存中的模板，已经真实挂载到了页面中，用户已经可以看到渲染的页面了 ``` console.log((document.getElementById("h1")).innerText); //ok ``` 注意：mounted是实例创建期间的最后一个生命周期函数，当执行完了mounted就表示，实例已经被完全创建好了 #### 2. 运行阶段 1. beforeUpdate(): 这时候我们的界面还没有被更新，但数据已经被更新了 得出结论：当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步 此时改数据不会死循环 ``` console.log("页面显示的数据是:"+document.getElementById("h1").innerText); //old console.log("data中的数据是:"+ this.msg); //new ``` 2. updated(): 数据已经重新渲染到DOM树，页面更新完毕，不要在update中改数据，否则会导致视图陷入死循环 #### 3. 销毁阶段 1. beforeDestory(): 进入before销毁阶段，此时实例所有东西还可用，尚未真正进入销毁状态 2. destroyed() 销毁：手动移除组件，或者路由切换 vm.$destroy(): 移除所有的观察者，移除监听事件 实例销毁，所有内存不可用