vue 声明周期函数_vue生命周期钩子函数（11个）

说一下vue的声明周期：

vue 的生命周期11个钩子函数是按照以下的顺序来的 ：(不可逆转哦,第11个除外)

一. 组件创建前后

1.beforeCreate

2.created1

2

如，写一个子组件，然后挂在到父组件，在子组件中，console.log 子组件中的

data(){ return { a:1 },

beforeCreate(){

console.log(this.a)//undefined },

created(){

console.log(this.a)//1 }

}1

2

3

4

5

6

7

8

9

10

11

.

.

二. vue启动前后

3.beforeMount 4.mounted1

2

这两个的意思就是，

vue在beforeMount时，还不管事，也就是说，还没有渲染数据到

当mounted时，才会往

接管

可以获取#app的innerHTML查看差异；

beforeMount(){ console.log(document.getElementById('app').innerHTML)//空的

},

mounted(){ console.log(document.getElementById('app').innerHTML)//#app里的内容 }1

2

3

4

5

6

.

.

三. 组件更新前后

5.beforeUpdate 6.updated1

2

这个就不用我多说了吧？当子组件里面的 视图改变 的时候触发。

如，做一个按钮，让data里面的a++，假如 一开始a是1

beforeUpdate返回1

updated返回2

beforeUpdate(){

console.log(document.getElementById('a').innerHTML)//1 },

updated(){

console.log(document.getElementById('a').innerHTML)//2 }1

2

3

4

5

6

再点一次

beforeUpdate返回2

updated返回3。。。

.

.

四. 组件销毁前后(一般配合v-if使用)

7.beforeDestroy

8.destroyed1

2

给这个子组件用v-if来控制它的销毁和创建，注意以下：v-show不行。

子组件销毁前触发beforeDestroy

子组件销毁后触发destroyed

第一次会触发7.8.

创建子组件后会触发以上的第1.2.3.4.钩子函数。

有一个问题，如果我们在子组件里写一个定时器，然后，子组件被销毁了，定时器还会执行吗？

答案是会的

所以这时候就会用到了destroyed,在组件被销毁后，我们把定时器给清除就好了。

所以这两个钩子函数一般用于做性能的优化。

.

.

五. 组件激活时，未激活时

9.activated

10.deactivated1

2

这两个钩子函数呢一般配合来使用。

通过看 四。这个例子，你肯定知道了一个组件怎么被销毁和创建。

但是我们知道通常一个组件是很大的，如果我们总是一直创建、销毁、创建、销毁。。。这样很不合理，而且很浪费性能。。。

这时候我们就可以用配合着两个钩子函数来控制组件的激活和不激活。

说一下，它就相当于把你的组件给缓存下来了，目的呢就是不让组件重复的渲染，然后我们通过v-if触发，子组件就不会再触发7 和 8 了，而是只会频繁的触发9 和 10

这样性能会比7 和 8 好的多。

.

.

六. 当捕获一个来自子孙组件的错误时被调用

11.errorCaptured1

当子孙组件报错的时候，父组件会触发这个钩子函数，并且会返回三个参数，

第一个参数是 错误对象

第二个参数是 报错的子孙组件

第三个参数是 报错的子孙组件的具体哪个地方报错。(如，假如我没有定义b这个变量，但是我去console.log(b) 这一句肯定会报错，假如我把这句错误代码写在了created这个钩子函数里，那第三个参数会返回就是：created hook)

具体第11个没深入研究，喜欢的可以去看下官网的 errorCaptured。