1. 与 2.x 版本生命周期相对应的组合式 API
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
<template> <div class="about"> <h2>msg: {{msg}}</h2> <hr> <button @click="update">更新</button> </div> </template> <script lang="ts"> import { ref, onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from "vue" export default { beforeCreate () { console.log('beforeCreate()') }, created () { console.log('created') }, beforeMount () { console.log('beforeMount') }, mounted () { console.log('mounted') }, beforeUpdate () { console.log('beforeUpdate') }, updated () { console.log('updated') }, beforeUnmount () { console.log('beforeUnmount') }, unmounted () { console.log('unmounted') }, setup() { const msg = ref('abc') const update = () => { msg.value += '--' } onBeforeMount(() => { console.log('--onBeforeMount') }) onMounted(() => { console.log('--onMounted') }) onBeforeUpdate(() => { console.log('--onBeforeUpdate') }) onUpdated(() => { console.log('--onUpdated') }) onBeforeUnmount(() => { console.log('--onBeforeUnmount') }) onUnmounted(() => { console.log('--onUnmounted') }) return { msg, update } } } </script>
2. 新增的钩子函数
onRenderTracked：直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。
引用进来，在 setup() 中使用即可
onRenderTracked((event) => { console.log("状态跟踪组件----------->"); console.log(event); });
onRenderTriggered：直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来
使用的时候依然要先引入
在使用onRenderTriggered前，记得注释相应的onRenderTracked代码，这样看起来会直观很多。 然后把onRenderTriggered()函数，写在setup()函数里边
onRenderTriggered((event) => { console.log("状态触发组件--------------->"); console.log(event); });
属性介绍
- key：那边变量发生了变化
- newValue：更新后变量的值
- oldValue：更新前变量的值
- target ：目前页面中的响应变量和函数
