1. 创建前后 - setup
1.1 作用
替代 vue2 中的 onBeforeCreate 和 onCreated，分别在组件被创建之前和完成时调用
2. 挂载前后 - onBeforeMount / onMounted
2.1 作用
挂载之前（onBeforeMount），不能获取到 DOM 元素（undefined）
挂载完成（onMounted），可以获取到 DOM 元素
3. 更新前后 - onBeforeUpdate / onUpdated
3.1 作用
更新之前（onBeforeUpdate），获取到的是旧内容
更新完成（onUpdated），获取到的是新内容
4. 卸载前后 - onBeforeUnmount / onUnmounted
4.1 作用
卸载之前（onBeforeUnmount），作一些解绑事件、取消订阅、清除定时器等操作
卸载完成（onUnmounted），组件完全销毁
4.2 注意
如果在组件标签上使用的是 v-if，则会触发组件的卸载操作；
而 v-show 则不能直接作用于组件标签上，需要为组件标签包裹一个外层标签，然后作用在外层标签上
5. 收集依赖 - onRenderTracked
5.1 作用
收集依赖，在 onBeforeMount 和 onMounted 之间触发
有一个响应式数据，就收集一次，onRenderTracked 就触发一次
5.2 用法
接收一个 event，是一个 effect 对象，type 为 get
onRenderTracked((e) => {
console.log("收集依赖 ===> ", e) // 收集依赖 ===> {effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
})
6. 更新依赖 - onRenderTriggered
6.1 作用
更新依赖，在 onBeforeUpdate 和 onUpdated 之前触发
有一个响应式数据变化，就更新一次，onRenderTriggered 就触发一次
6.2 用法
接收一个 event，是一个 effect 对象，type 为 set
onRenderTriggered((e) => {
console.log("更新依赖 ===> ", e) // 更新依赖 ===> {effect: ReactiveEffect, target: RefImpl, type: 'set', key: 'value', newValue: '新内容'}
})
7. getCurrentInstance
7.1 作用
返回一个当前组件实例，可以查看生命周期是否挂载上去了
7.2 用法
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
console.log(instance) // {uid: 1, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。
在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。
本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。
除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。
在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!
替代 vue2 中的 onBeforeCreate 和 onCreated，分别在组件被创建之前和完成时调用
2.1 作用
挂载之前（onBeforeMount），不能获取到 DOM 元素（undefined）
挂载完成（onMounted），可以获取到 DOM 元素
3. 更新前后 - onBeforeUpdate / onUpdated
3.1 作用
更新之前（onBeforeUpdate），获取到的是旧内容
更新完成（onUpdated），获取到的是新内容
4. 卸载前后 - onBeforeUnmount / onUnmounted
4.1 作用
卸载之前（onBeforeUnmount），作一些解绑事件、取消订阅、清除定时器等操作
卸载完成（onUnmounted），组件完全销毁
4.2 注意
如果在组件标签上使用的是 v-if，则会触发组件的卸载操作；
而 v-show 则不能直接作用于组件标签上，需要为组件标签包裹一个外层标签，然后作用在外层标签上
5. 收集依赖 - onRenderTracked
5.1 作用
收集依赖，在 onBeforeMount 和 onMounted 之间触发
有一个响应式数据，就收集一次，onRenderTracked 就触发一次
5.2 用法
接收一个 event，是一个 effect 对象，type 为 get
onRenderTracked((e) => {
console.log("收集依赖 ===> ", e) // 收集依赖 ===> {effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
})
6. 更新依赖 - onRenderTriggered
6.1 作用
更新依赖，在 onBeforeUpdate 和 onUpdated 之前触发
有一个响应式数据变化，就更新一次，onRenderTriggered 就触发一次
6.2 用法
接收一个 event，是一个 effect 对象，type 为 set
onRenderTriggered((e) => {
console.log("更新依赖 ===> ", e) // 更新依赖 ===> {effect: ReactiveEffect, target: RefImpl, type: 'set', key: 'value', newValue: '新内容'}
})
7. getCurrentInstance
7.1 作用
返回一个当前组件实例，可以查看生命周期是否挂载上去了
7.2 用法
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
console.log(instance) // {uid: 1, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。
在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。
本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。
除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。
在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!
更新之前（onBeforeUpdate），获取到的是旧内容
更新完成（onUpdated），获取到的是新内容
4.1 作用
卸载之前（onBeforeUnmount），作一些解绑事件、取消订阅、清除定时器等操作
卸载完成（onUnmounted），组件完全销毁
4.2 注意
如果在组件标签上使用的是 v-if，则会触发组件的卸载操作；
而 v-show 则不能直接作用于组件标签上，需要为组件标签包裹一个外层标签，然后作用在外层标签上
5. 收集依赖 - onRenderTracked
5.1 作用
收集依赖，在 onBeforeMount 和 onMounted 之间触发
有一个响应式数据，就收集一次，onRenderTracked 就触发一次
5.2 用法
接收一个 event，是一个 effect 对象，type 为 get
onRenderTracked((e) => {
console.log("收集依赖 ===> ", e) // 收集依赖 ===> {effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
})
6. 更新依赖 - onRenderTriggered
6.1 作用
更新依赖，在 onBeforeUpdate 和 onUpdated 之前触发
有一个响应式数据变化，就更新一次，onRenderTriggered 就触发一次
6.2 用法
接收一个 event，是一个 effect 对象，type 为 set
onRenderTriggered((e) => {
console.log("更新依赖 ===> ", e) // 更新依赖 ===> {effect: ReactiveEffect, target: RefImpl, type: 'set', key: 'value', newValue: '新内容'}
})
7. getCurrentInstance
7.1 作用
返回一个当前组件实例，可以查看生命周期是否挂载上去了
7.2 用法
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
console.log(instance) // {uid: 1, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。
在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。
本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。
除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。
在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!
收集依赖，在 onBeforeMount 和 onMounted 之间触发
有一个响应式数据，就收集一次，onRenderTracked 就触发一次
接收一个 event，是一个 effect 对象，type 为 get
onRenderTracked((e) => {
console.log("收集依赖 ===> ", e) // 收集依赖 ===> {effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
})
6.1 作用
更新依赖，在 onBeforeUpdate 和 onUpdated 之前触发
有一个响应式数据变化，就更新一次，onRenderTriggered 就触发一次
6.2 用法
接收一个 event，是一个 effect 对象，type 为 set
onRenderTriggered((e) => {
console.log("更新依赖 ===> ", e) // 更新依赖 ===> {effect: ReactiveEffect, target: RefImpl, type: 'set', key: 'value', newValue: '新内容'}
})
7. getCurrentInstance
7.1 作用
返回一个当前组件实例，可以查看生命周期是否挂载上去了
7.2 用法
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
console.log(instance) // {uid: 1, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。
在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。
本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。
除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。
在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!
返回一个当前组件实例，可以查看生命周期是否挂载上去了
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
console.log(instance) // {uid: 1, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}