女朋友生日,不要礼物,非要我给她讲解VUE的生命周期钩子函数,最后直夸我讲的详细又透彻!
VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁
四个模块。
注:在组件的整个生命周期内,钩子函数都是可被
自动调用
的,且生命周期函数的执行顺序与书写的顺序无关
目录
注:加*代表相对更重要
*图示
1.beforeCreate
- 该函数执行在
组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前
,实例初始化之后被调用。 - 在该阶段
组件未创建
,不能访问数据
,组件中的data,ref均为undefined。
2*.created
-
该函数在
组件创建完成后
被立即调用,在这一步,实例已完成以下的配置
:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。 -
但是
还未
渲染成HTML模板,组件中的data对象已经存在,可以对data进行操作了,即可以访问数据,发请求
,ref依旧
是undefined,挂载阶段还没开始
,$el 属性目前尚不可用
。 -
一般我们可以将对数据的初始化和初始化页面的请求放到里面,结束loading。
-
created
实例
:
- RAP2模拟一个后端接口(http://rap2.taobao.org:38080/app/mock/252122/test),使用created拿数据。
- RAP2操作界面如下
- 代码:
<div id="box">
<ul>
<li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
list:[]
},
created(){
fetch('http://rap2.taobao.org:38080/app/mock/252122/test')
.then(res=>res.json())
.then((res)=>{
if(res.code===200){
this.list = res.data.list;
}
})
},
beforeCreate(){
},
})
</script>
- 结果:
3.beforeMount
- 该函数在组件挂载之前,在该阶段页面上
还没
渲染出HTML元素,data初始化完成,ref依旧
不可以操作,相关的 render 函数首次
被调用。 - 可以
访问数据
,编译模板结束
,虚拟dom已经存在
。 - 该钩子在
服务器端渲染期间不被调用
。
4*.mounted
- 该函数是
页面完成挂载之后执行
的,这时 el被
新创建的 vm.$el 替换了,就可以操作ref了,一般会用于将组件初始时请求数据的方法放到这里面
,filter
也是在这里生效。 -
如果
根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el也
在文档内。 - 可以拿到
数据和节点
,实例被挂载后调用。 -
注意
:mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
- 该钩子在
服务器端渲染期间不被调用
。 - beforeMount与mounted
实例①
:
(ref
表示节点;this.$refs.ref的标识
,就可拿到节点)
<div id="box">
<div ref='demo'>demo</div>
</div>
<script>
new Vue({
el:"#box",
data:{
a:666
},
mounted(){
console.log('mounted',this.a);
},
beforeMount(){
console.log('beforeMount',this.a);
console.log(this.$refs.demo);
}
})
</script>
结果:
- beforeMount与mounted
实例②
:
<div id="box">
<div ref='demo'>demo</div>
</div>
<script>
new Vue({
el:"#box",
data:{
a:666
},
mounted(){
console.log('mounted',this.a);
console.log(this.$refs.demo);
},
beforeMount(){
console.log('beforeMount',this.a);
}
})
</script>
结果:
- beforeMount与mounted
实例③
:
(节点挂载后,文本框自动获取焦点)
<div id="box">
<input type="text" ref='txt'>
</div>
<script>
new Vue({
el:"#box",
data:{
a:666,
},
mounted(){
console.log('mounted',this.a);
this.$refs.txt.focus();
},
beforeMount(){
console.log('beforeMount',this.a);
}
})
</script>
结果:
以上两个实例,更加有力的说明:
beforeMount执行在真实的dom节点挂载之前,此时没有节点,所以拿不到节点。mounted执行时真实的dom节点已经挂载到页面上了,所以能拿到节点。
例
:
beforeCreate、created、beforeMount、mounted执行顺序差别演示
:
(因为 它们此时都是对象,所以它们代码的摆放位置是不影响结果的。)
<div id="box"></div>
<script>
new Vue({
el:"#box",
data:{
a:666,
},
created(){
console.log("created",this.a);
},
beforeCreate(){
console.log('beforeCreate',this.a);
},
mounted(){
console.log('mounted',this.a);
},
beforeMount(){
console.log('beforeMount',this.a);
}
})
</script>
结果:
5.beforeUpdate
-
该函数在
数据更新时调用
,发生在虚拟 DOM 打补丁之前
,在有特殊需求的情况下,可以将更新之前的数据存起来,放到后面去使用。 -
这里适合在
更新之前
访问现有的 DOM
,比如手动移除已添加的事件监听器。 -
该钩子在
服务器端渲染期间不被调用
,因为
只有初次渲染会在服务端进行。
6*.updated
-
由于
数据更改导致的虚拟 DOM 重新渲染和打补丁
,在这之后会调用该钩子
,在数据更新之后做一些处理,即监控数据的变化。 -
当这个钩子
被调用时
,组件 DOM 已经更新
,所以
你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。 -
注意
:updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 updated 里使用 vm.$nextTick:
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
- 该钩子在服务器端渲染期间不被调用。
注意:
watch是监控特定数据的变化,而updated是监控组件里所有数据的变化。
例
:
beforeUpdate与updated执行演示
:
<body>
<div id="box">
<input type="range" min="1" max="100" v-model="n" />
<Com :n="n"></Com>
</div>
<script>
var Com = {
props:["n"],
template: `<div>{{n}}</div>`,
//这两个钩子会在数据更新时被调用
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated")
}
};
new Vue({
el: '#box',
components: {
Com,
},
data:{
n:1
}
});
</script>
结果:
7.beforeDestroy
- 该函数在
实例销毁之前调用
,这里的ref依旧可以操作
,实例仍然完全可用
,可以在这里做清除定时器
的操作,防止内存泄漏。 - 该钩子在
服务器端渲染期间不被调用
。
8*.destroyed
-
该函数在
组件销毁的时候执行
,即实例销毁后调用
,这里的ref不存在
。 -
该钩子
被调用后
,对应
Vue 实例的所有指令
都被解绑
,所有
的事件监听器
被移除
,所有的子实例也都被
销毁`。 -
该钩子在
服务器端渲染期间不被调用
。
例
:
beforeDestroy与destroyed执行演示
:
(this.$destroy()
可以销毁组件)
<div id="box">
<Com></Com>
</div>
<script>
var Com = {
template: `<div>
<button @click="kill">kill</button>
</div>`,
mounted() {
this.timer = setInterval(()=>{
console.log("hello");
},1000)
},
beforeDestroy(){
clearInterval(this.timer);
console.log("beforeDestory")
},
destroyed(){
console.log("destoryed")
},
methods:{
kill(){ //销毁组件
this.$destroy()
}
}
};
new Vue({
el: '#box',
components: {
Com,
},
});
</script>
结果:
注:组件进行销毁的时候,是先销毁的是父组件,然后销毁子组件
9.activated
被 keep-alive缓存的组件**时调用。
该钩子在服务器端渲染期间不被调用。
10.deactivated
被 keep-alive缓存的组件停用时调用。
该钩子在服务器端渲染期间不被调用。
例
:
activated与deactivated执行演示
:
<div id="box">
<keep-alive>
<component :is="cName"></component>
</keep-alive>
<button @click="cName='One'">change1</button>
<button @click="cName='Two'">change2</button>
</div>
<script>
var One ={
template:`<div>one component</div>`,
activated(){
console.log("activated");
},
deactivated(){
console.log("deactivated");
}
}
var Two ={
template:`<div>two component</div>`,
}
new Vue({
el:"#box",
components:{
One,Two
},
data:{
cName:'One' //存组件的名字
}
})
</script>
结果:
11.errorCaptured
类型
:(err: Error, vm: Component, info: string) => ?boolean
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象
、发生错误的组件实例
以及一个包含错误来源信息的字符串
。此钩子可以返回 false
以阻止该错误继续向上传播。
我们可以在此钩子中修改组件的状态。因此在捕获错误时,在模板或渲染函数中有一个条件判断来绕过其它内容就很重要;不然该组件可能会进入一个无限的渲染循环。
默认情况下,如果全局的 config.errorHandler被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。
如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子,则它们将会被相同的错误逐个唤起。
如果此 errorCaptured 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。
一个 errorCaptured 钩子能够返回 false以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured钩子和全局的 config.errorHandler。
如有纰漏,欢迎各路大佬不吝赐教,感激不尽!
上一篇: 如何做一个网页送给女朋友做生日礼物
下一篇: 神经网络学习(二)