Vue3 学习笔记(十)——生命周期
选项式钩子的示例
<!-- CustomInput.vue -->
<template>
<input v-model="value" />
</template>
<script>
export default {
// 一、组件实例化阶段的生命周期函数:
beforeCreate(){ // 1、组件实例初始化完成、props 解析之后;data()、computed之前
},
computed(): { // 2、响应式数据、计算属性、方法和侦听器设置
// 常用
},
created(){ // 3、在组件实例处理完所有与状态相关的选项后;即:响应式数据、计算属性、方法和侦听器设置完成后,挂载前。
},
beforeMount(){ // 4、组件被挂载前;这个钩子在服务端渲染时不会被调用。
},
mounted(){ // 5、组件被挂载后;这个钩子在服务端渲染时不会被调用。
// 常用
},
// 二、组件更新阶段的生命周期函数
beforeUpdate(){ // 1、组件更新之前;这个钩子在服务端渲染时不会被调用。
},
updated(){ // 2、组件更新之后;父组件的更新钩子将在其子组件的更新钩子之后调用。这个钩子在服务端渲染时不会被调用。
// 常用
// 注:这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的。
// 如果你需要在某个特定的状态更改后访问更新后的 DOM,请使用 nextTick() 作为替代。
},
activated(){ // 3、若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用;这个钩子在服务端渲染时不会被调用。
},
deactivated(){ // 4、若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用;这个钩子在服务端渲染时不会被调用。
},
// 三、组件卸载阶段的生命周期函数
beforeUnmount(){ // 1、组件卸载之前;这个钩子在服务端渲染时不会被调用。
},
unmounted(){ // 2、组件卸载之后;这个钩子在服务端渲染时不会被调用。
// 常用
// 可以在这个钩子中手动清理一些副作用,例如计时器、DOM 事件监听器或者与服务器的连接。
},
// 四、其他钩子
errorCaptured(){ // 1、在捕获了后代组件传递的错误时调用。
// 可以获取到的组件:组件渲染、事件处理器、生命周期钩子、setup() 函数、侦听器、自定义指令钩子、过渡钩子
// 这个钩子带有三个实参:错误对象、触发该错误的组件实例、以及一个说明错误来源类型的信息字符串。
// 错误传递规则:
// 默认情况下,所有的错误都会被发送到应用级的 app.config.errorHandler (前提是这个函数已经定义),这样这些错误都能在一个统一的地方报告给分析服务。
// 如果组件的继承链或组件链上存在多个 errorCaptured 钩子,对于同一个错误,这些钩子会被按从底至上的顺序一一调用。这个过程被称为“向上传递”,类似于原生 DOM 事件的冒泡机制。
// 如果 errorCaptured 钩子本身抛出了一个错误,那么这个错误和原来捕获到的错误都将被发送到 app.config.errorHandler。
// errorCaptured 钩子可以通过返回 false 来阻止错误继续向上传递。即表示“这个错误已经被处理了,应当被忽略”,它将阻止其他的 errorCaptured 钩子或 app.config.errorHandler 因这个错误而被调用。
},
serverPrefetch(){ // 2、当组件实例在服务器上被渲染之前要完成的异步函数。
// 如果这个钩子返回了一个 Promise,服务端渲染会在渲染该组件前等待该 Promise 完成。
},
renderTracked (){ // 3、在一个响应式依赖被组件的渲染作用追踪后调用。
// 这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
},
renderTriggered (){ // 4、在一个响应式依赖被组件触发了重新渲染之后调用。
// 这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
}
}
</script>
一、组件实例化阶段
1、beforeCreate()
初始化前
组件实例初始化完成、props 解析之后;data()、computed之前。
2、computed()
设置组件数据信息
响应式数据、计算属性、方法和侦听器设置。
3、created()
初始化后
在组件实例处理完所有与状态相关的选项后,即:响应式数据、计算属性、方法和侦听器设置完成后,挂载前。
4、beforeMount()
挂载前
组件被挂载前;这个钩子在服务端渲染时不会被调用。
5、mounted()
挂载后
组件被挂载后;这个钩子在服务端渲染时不会被调用。
二、组件更新阶段
1、beforeUpdate()
更新前
组件更新之前;这个钩子在服务端渲染时不会被调用。
2、updated()
更新后
组件更新之后;父组件的更新钩子将在其子组件的更新钩子之后调用。这个钩子在服务端渲染时不会被调用。
1)这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的。
2)如果你需要在某个特定的状态更改后访问更新后的 DOM,请使用 nextTick() 作为替代。
3、activated()
组件插入到 DOM时
若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用;这个钩子在服务端渲染时不会被调用。
4、deactivated()
组件从 DOM 中被移除时
若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用;这个钩子在服务端渲染时不会被调用。
三、组件卸载阶段
1、beforeUnmount()
组件卸载之前
组件卸载之前;这个钩子在服务端渲染时不会被调用。
2、unmounted()
组件卸载之后
组件卸载之后;这个钩子在服务端渲染时不会被调用。
四、其他钩子
1、errorCaptured()
捕获异常
在捕获了后代组件传递的错误时调用。
1)可以获取到的组件:组件渲染、事件处理器、生命周期钩子、setup() 函数、侦听器、自定义指令钩子、过渡钩子
2)这个钩子带有三个实参:错误对象、触发该错误的组件实例、以及一个说明错误来源类型的信息字符串。
3)错误传递规则:
默认情况下,所有的错误都会被发送到应用级的 app.config.errorHandler (前提是这个函数已经定义),这样这些错误都能在一个统一的地方报告给分析服务。
如果组件的继承链或组件链上存在多个 errorCaptured 钩子,对于同一个错误,这些钩子会被按从底至上的顺序一一调用。这个过程被称为“向上传递”,类似于原生 DOM 事件的冒泡机制。
如果 errorCaptured 钩子本身抛出了一个错误,那么这个错误和原来捕获到的错误都将被发送到 app.config.errorHandler。
errorCaptured 钩子可以通过返回 false 来阻止错误继续向上传递。即表示“这个错误已经被处理了,应当被忽略”,它将阻止其他的 errorCaptured 钩子或 app.config.errorHandler 因这个错误而被调用。
注:捕获全局异常见:Vue3 学习笔记(六)——Vue应用的使用
2、serverPrefetch()
使用服务器渲染时,渲染前
当组件实例在服务器上被渲染之前要完成的异步函数。如果这个钩子返回了一个 Promise,服务端渲染会在渲染该组件前等待该 Promise 完成。
3、renderTracked ()
响应式依赖渲染时
在一个响应式依赖被组件的渲染作用追踪后调用。
注:这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
4、renderTriggered ()
响应式依赖重新渲染之后
在一个响应式依赖被组件触发了重新渲染之后调用。
注:这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
本文来自博客园,作者:꧁执笔小白꧂,转载请注明原文链接:https://www.cnblogs.com/qq2806933146xiaobai/articles/17354357.html