前端必知必会-Vue “renderTracked”和“renderTriggered”生命周期钩子

---

Vue “renderTracked”和“renderTriggered”生命周期钩子

当将渲染函数设置为跟踪或监控反应组件时，renderTracked 钩子会运行。renderTracked 钩子通常在初始化反应组件时运行。

当此类跟踪的反应组件发生更改时，renderTriggered 钩子会运行，从而触发新的渲染，以便屏幕使用最新更改进行更新。

反应组件是可以更改的组件。

渲染函数是 Vue 编译的函数，用于跟踪反应组件。当反应组件发生更改时，会触发渲染函数并将应用程序重新渲染到屏幕上。

renderTracked 和 renderTriggered 钩子用于调试，仅在开发模式下可用。

要查看 renderTracked 和 renderTriggered 钩子中的 alert() 和 console.log()，您必须将以下示例中的代码复制到您的计算机并在开发模式下运行应用程序。

示例
CompOne.vue:

<template>
<h2>组件一h2>
<p>这是一个组件。p>
<button @click="counter++">添加一button>
<p>{{ counter }>p>
template>

<script>
export default {
data() {
return {
counter: 0
}
},
renderTracked(evt) {
console.log("renderTracked: ",evt);
alert("renderTracked");
},
renderTriggered(evt) {
console.log("renderTriggered: ",evt)
alert("renderTriggered");
}
}
script>

App.vue:

<template>
<h1>'renderTracked' 和 'renderTriggered' 生命周期钩子h1>
<p>'renderTracked' 和 'renderTriggered' 生命周期钩子用于调试。p>
<p><mark>此示例仅在开发模式下有效，因此要查看钩子运行，您必须复制此代码并在开发模式下在您自己的计算机上运行它。mark>p>
<div>
<comp-one>comp-one>
div>
template>

<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 20px;
margin-top: 10px;
background-color: lightgreen;
}
style>

注意：上述示例中的代码旨在在开发模式下复制并在您的计算机上本地运行，因为 renderTracked 和 renderTriggered 挂钩仅在开发模式下有效。

---

总结

本文介绍了Vue “renderTracked”和“renderTriggered”生命周期钩子的使用，如有问题欢迎私信和评论