vue生命周期钩子函数(11个)

2018-7-11 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

说一下vue的声明周期:

vue 的生命周期11个钩子函数是按照以下的顺序来的 :(不可逆转哦,第11个除外) 
一. 组件创建前后

1.beforeCreate
2.created
	
  • 1
  • 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.mounted
	
  • 1
  • 2

这两个的意思就是, 
vue在beforeMount时,还不管事,也就是说,还没有渲染数据到<div id="app"><div/>里面,此时的这个组件还是空的

mounted时,才会往<div id="app"><div/> 添加东西,也就是vue正式 
接管<div id="app"><div/>

可以获取#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.updated
	
  • 1
  • 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.destroyed
	
  • 1
  • 2

给这个子组件用v-if来控制它的销毁和创建,注意以下:v-show不行。 
子组件销毁前触发beforeDestroy 
子组件销毁后触发destroyed 
第一次会触发7.8. 
创建子组件后会触发以上的第1.2.3.4.钩子函数。

有一个问题,如果我们在子组件里写一个定时器,然后,子组件被销毁了,定时器还会执行吗? 
答案是会的 
所以这时候就会用到了destroyed,在组件被销毁后,我们把定时器给清除就好了。

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

.


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

9.activated
10.deactivated
	
  • 1
  • 2

这两个钩子函数呢一般配合<keep-alive><keep-alive/>来使用。 
通过看 四。这个例子,你肯定知道了一个组件怎么被销毁和创建。 
但是我们知道通常一个组件是很大的,如果我们总是一直创建、销毁、创建、销毁。。。这样很不合理,而且很浪费性能。。。

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

说一下<keep-alive><keep-alive/>,它就相当于把你的组件给缓存下来了,目的呢就是不让组件重复的渲染,然后我们通过v-if触发,子组件就不会再触发7 和 8 了,而是只会频繁的触发9 和 10 
这样性能会比7 和 8 好的多。 

.


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

11.errorCaptured
	
  • 1

当子孙组件报错的时候,父组件会触发这个钩子函数,并且会返回三个参数, 
第一个参数是 错误对象 
第二个参数是 报错的子孙组件 
第三个参数是 报错的子孙组件的具体哪个地方报错。(如,假如我没有定义b这个变量,但是我去console.log(b) 这一句肯定会报错,假如我把这句错误代码写在了created这个钩子函数里,那第三个参数会返回就是:created hook

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

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


标签: vue生命周期钩子函数(11个)


Powered by emlog 京ICP备12006971号-1 sitemap