VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁
四个模块。
注:在组件的整个生命周期内,钩子函数都是可被自动调用
的,且生命周期函数的执行顺序与书写的顺序无关
注:加*代表相对更重要
*图示
结果:
实例销毁之前调用
,这里的ref依旧可以操作
,实例仍然完全可用
,可以在这里做清除定时器
的操作,防止内存泄漏。
该钩子在服务器端渲染期间不被调用
。
8*.destroyed
该函数在组件销毁的时候执行
,即实例销毁后调用
,这里的ref不存在
。
该钩子被调用后
,对应
Vue 实例的所有指令
都被解绑
,所有
的事件监听器
被移除
,所有的子实例也都被
销毁`。
该钩子在服务器端渲染期间不被调用
。
例
:
beforeDestroy与destroyed执行演示
:
(this.$destroy()
可以销毁组件)
var Com = {
template: `
`,
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,
},
});
结果:
注:组件进行销毁的时候,是先销毁的是父组件,然后销毁子组件
9.activated被 keep-alive缓存的组件激活时调用。
该钩子在服务器端渲染期间不被调用。
10.deactivated被 keep-alive缓存的组件停用时调用。
该钩子在服务器端渲染期间不被调用。
例
:
activated与deactivated执行演示
:
var One ={
template:`one component`,
activated(){
console.log("activated");
},
deactivated(){
console.log("deactivated");
}
}
var Two ={
template:`two component`,
}
new Vue({
el:"#box",
components:{
One,Two
},
data:{
cName:'One' //存组件的名字
}
})
结果:
类型
:(err: Error, vm: Component, info: string) => ?boolean
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象
、发生错误的组件实例
以及一个包含错误来源信息的字符串
。此钩子可以返回 false
以阻止该错误继续向上传播。
我们可以在此钩子中修改组件的状态。因此在捕获错误时,在模板或渲染函数中有一个条件判断来绕过其它内容就很重要;不然该组件可能会进入一个无限的渲染循环。
默认情况下,如果全局的 config.errorHandler被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。
如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子,则它们将会被相同的错误逐个唤起。
如果此 errorCaptured 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。
一个 errorCaptured 钩子能够返回 false以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured钩子和全局的 config.errorHandler。
如有纰漏,欢迎各路大佬不吝赐教,感激不尽!