如何避免 Vue 中子组件 `onUpdated` 钩子在父组件状态更新时触发？

避免子组件 onUpdated 钩子在父组件状态更新时触发

问题

当将响应式属性的对象作为道具传递给子组件时，子组件的 onUpdated 钩子会在父组件状态更新时触发。这会导致不必要的重新渲染，从而影响性能。

原因

响应式属性的对象在被传递给子组件时，子组件可以访问其响应式属性。当父组件的状态发生变化时，响应式属性会更新，导致子组件收到更新通知，从而触发其 onUpdated 钩子。

解决方案

为了避免这种情况，我们可以使用计算属性。计算属性是基于其他响应式属性的函数。当计算属性依赖的响应式属性发生变化时，计算属性会重新计算并更新其值，但它不会触发子组件的 onUpdated 钩子。

示例：

// 父组件

<template>
  <input v-model="text" />
  <Child :data="computedData" />
</template>

<script>
import Child from './Child.vue'
import { ref, computed } from 'vue'

const text = ref('')
const data = ref()

const computedData = computed(() => ({ data: data.value }))
</script>

// 子组件

<template></template>

<script>
import { onUpdated } from 'vue'

onUpdated(() => {
  // 不会触发
})
</script>

代码片段

在父组件中：

const computedData = computed(() => ({ data: data.value }))
// ...
<Child :data="computedData" />

在子组件中：

import { onUpdated } from 'vue'

onUpdated(() => {
  // 不会触发
})

常见问题解答

1. 什么是计算属性？

计算属性是基于其他响应式属性的函数。当计算属性依赖的响应式属性发生变化时，计算属性会重新计算并更新其值，但它不会触发子组件的 onUpdated 钩子。

2. 为什么使用计算属性可以避免子组件 onUpdated 钩子触发？

因为子组件只能访问计算属性的值，该值不会被父组件状态的更改所影响。

3. 计算属性和侦听器有什么区别？

侦听器会监视响应式属性的变化，并在发生变化时触发一个函数。计算属性基于其他响应式属性计算值，并在依赖项发生变化时更新其值。计算属性不会触发子组件的 onUpdated 钩子，而侦听器会触发。

4. 如何决定使用计算属性还是侦听器？

如果需要在子组件中使用响应式属性的值，而不需要在每次更新时触发 onUpdated 钩子，则应该使用计算属性。如果需要在每次更新时执行特定的操作，则应该使用侦听器。

5. 什么是响应式属性？

响应式属性是可以被 Vue.js 追踪并自动更新的值。它们可以是原始值、对象或数组。当响应式属性发生变化时，Vue.js 将重新渲染受其影响的组件。