从'vue'中引入的生命周期函数,这些生命周期钩子注册函数只能在setup()期间同步使用
因为它们依赖于内部的全局状态来定位当前组件实例(正在调用setup()的组件实例),不在当前组件下调用这些函数会抛出一个错误。
即可以从其他文件引入使用了生命周期的函数等,放在setup中执行
和外部的生命周期函数相比,会优先指向setUp内的生命周期函数,再去执行外部的生命周期函数
使用
import { onMounted } from 'vue'
setup()
{
onMounted(()=>{
...
})
修改两个生命周期函数
onBeforeUnmount 对应beforeDestroy
在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。
onUnmounted 对应destroyed
卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
新增两个生命周期函数
追踪的依赖:
在template中显示的变量
onRenderTracked(({ key, target, type })=>{
跟踪虚拟DOM重新渲染时调用,钩子接收debugger event作为参数,此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
type:set/get操作
key:追踪的键
target:重新渲染后的键
})
onRenderTriggered(({ key, target, type })=>{
当虚拟DOM重新渲染被触发时调用,和renderTracked类似,接收debugger event作为参数,此事件告诉你是什么操作触发了重新渲染,以及该操作的目标对象和键。
})
例:
<div id="app">
<button v-on:click="addToCart">Add to cart</button>
<p>Cart({{ cart }})</p>
</div>
const app = Vue.createApp({
data() {
return {
cart: 0
}
},
renderTracked({ key, target, type }) {
console.log({ key, target, type })
/* 当组件第一次渲染时,这将被记录下来:
{
key: "cart",
target: {
cart: 0
},
type: "get"
}
*/
},
renderTriggered({ key, target, type }) {
console.log({ key, target, type })
},
methods: {
addToCart() {
this.cart += 1
/* 这将导致renderTriggered调用
{
key: "cart",
target: {
cart: 1
},
type: "set"
}
*/
}
}
})
app.mount('#app')
代码示例:
<template>
<div>
<img src="./logo.png">
<h1>Hello Vue 3!</h1>
{{name}}{{obj.sex}}
<button @click="inc">Clicked {{ count }} times.</button>
</div>
</template>
<script>
import { ref,reactive,computed,readonly,watchEffect,watch,onMounted, onUpdated, onUnmounted,onRenderTracked,onRenderTriggered } from 'vue'
export default {
setup() {
let count = ref(0)
let count2=ref(2);
let name = ref('jeff')
const obj=reactive({sex:'male'})
const robj=readonly(obj);
let timer;
let r=readonly('aa') //不具有只读的能力
onMounted(()=>{
console.log('挂载后');
})
onRenderTracked((e)=>{
console.log(e)
})
onRenderTriggered((e)=>{
console.log(e);
})
const inc = () => {
count.value++;
name.value='jak'
}
return {
count,
inc,
name, //在setup返回对象中自动解套
obj
}
}
}
</script>
<style scoped>
img {
width: 200px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
</style>