Vue.js实例学习：生命周期

Vue生命周期钩子：

• beforeCreate、created
• beforeMount、mounted
• beforeUpdate、updated
• activated、deactivated
• beforeDestroy、destroyed
• errorCaptured
  

一、beforeCreate、created

控制台输出：

说明：在created中可以操作数据，并且可以实现从Vue到页面的影响。应用：发起Ajax请求。

---

---

二、beforeMount、mounted

控制台输出：

说明 装载前(beforeMount) 是原DOM，装载后(mounted)是Vue作用后的DOM。

---

三、beforeUpdate、updated

（1）点击button前，页面是这样的：

控制台输出：

（2）点击button后，控制台输出：

页面更新为：

（3）如果我们将App的template改成下面这样，

 let App = {
    template: `
Hello Vuechange
`,
	·······
  };

那么，无论我们怎么点击button,都不会触发beforeUpdate和updated函数。因为点击button虽然改变了myText的值，但并未造成页面的改变，所以beforeUpdate和updated函数不执行。

说明：数据改变导致页面也改变，才会触发beforeUpdate和updated
应用：

• beforeMount：可以获取Vue启动前的DOM （只执行一次）
• mounted：可以获取Vue启动后的DOM （只执行一次）
• beforeUpdate: 可以获取旧的DOM
• updated：可以获取更新后 的DOM

---

四、beforeDestroy、destroyed

（1）点击button前，页面是这样：

控制台输出：

（2）点击button后，页面变成这样：

控制台输出：

（3）再点击button，页面显示和控制台输出 和（1）一样。

v-if对应的组件的插入与否，因而对应着组件的是否创建。

---

beforeDestroy与destroyed的区别：看下图

beforeDestroy时还能拿到Teardown，watchers，子组件等东西；而destroyed时，就拿不到了。

---

优化：keep-alive

上面的例子里，我们每点击一次button，都要对app组件进行一次创建或销毁，显然这是极不合理的。

因此我们可以使用Vue的内置组件keep-alive：它能把第一次创建的组件实例缓存下来。

用法：用keep-alive标签把要缓存的组件包裹起来：

 new Vue({
    ········
    template: 
      `

        
          
        
        点我app组件就死啦
      
`,
  });

这时候，无论你点击多少次button，你会发现控制台永远显示的都是 第一次组件实例被创建时输出的：

在将来我们的组件中会包含js、html、css，而用keep-alive能很好的将它们缓存起来，不用反复创建销毁。

你每次点击button导致app组件的消失和出现，其实就对应着Vue生命周期里的 activated 和 deactivated。

接着往下看····

---

五、activated、deactivated

activated对应组件的激活，而deactivated对应组件的停用。

（1）点击button前，页面是这样：

控制台输出：

（2）点击button后，页面变成这样：

控制台输出：

（3）再点击button，页面同(1)，控制台输出：