Vue.js 在Vue 3中监听嵌套属性的变化

在本文中，我们将介绍在Vue 3中如何监听嵌套属性的变化。Vue 3是最新版本的Vue.js，它引入了一些新的特性和改进，其中包括对嵌套属性变化的监听机制。

Vue 3中的watch

在Vue 3中，我们可以使用watch函数来监测数据的变化。watch函数接收两个参数：要监听的属性和回调函数。当监听的属性发生变化时，回调函数会被触发。

下面是一个简单的示例，演示了如何使用watch函数监听嵌套属性的变化：

<script>
  import { reactive, watch } from 'vue'

  export default {
    setup() {
      const person = reactive({
        name: 'John',
        age: 25,
        address: {
          street: '123 Main St',
          city: 'New York',
          state: 'NY'
        }
      })

      watch(() => person.address, (newVal, oldVal) => {
        console.log('Address changed:', newVal, oldVal)
      })

      return {
        person
      }
    }
  }
</script>

在上面的代码中，我们使用reactive函数创建一个具有嵌套属性的响应式对象person。然后，我们使用watch函数来监听person.address属性的变化。当person.address发生变化时，回调函数将被执行，并打印出新的值和旧的值。

深度监听

在Vue 3中，我们可以使用第三个参数来指定是否深度监听属性的变化。默认情况下，watch函数只会监听对象的直接属性的变化，而不会递归地监听嵌套属性的变化。

下面是一个示例，展示了如何使用深度监听来监听嵌套属性的变化：

<script>
  import { reactive, watch } from 'vue'

  export default {
    setup() {
      const person = reactive({
        name: 'John',
        age: 25,
        address: {
          street: '123 Main St',
          city: 'New York',
          state: 'NY'
        }
      })

      watch(() => person, (newVal, oldVal) => {
        console.log('Person changed:', newVal, oldVal)
      }, { deep: true })

      return {
        person
      }
    }
  }
</script>

在上面的代码中，我们使用watch函数来监听整个person对象的变化，而不仅仅是person.address属性。通过将{ deep: true }作为第三个参数传递给watch函数，我们可以实现深度监听，以便在任何嵌套属性发生变化时都能够触发回调函数。

组件中的watch

在Vue 3中，我们还可以在组件中使用watch函数来监听嵌套属性的变化。下面是一个组件的示例，展示了如何在组件中使用watch函数监听嵌套属性的变化：

<script>
  import { reactive, watch } from 'vue'

  export default {
    setup() {
      const person = reactive({
        name: 'John',
        age: 25,
        address: {
          street: '123 Main St',
          city: 'New York',
          state: 'NY'
        }
      })

      watch(() => person.address, (newVal, oldVal) => {
        console.log('Address changed:', newVal, oldVal)
      })

      return {
        person
      }
    }
  }
</script>

在上面的代码中，我们在组件的setup函数中使用watch函数来监听person.address属性的变化。当person.address发生变化时，回调函数将被执行。

总结

Vue 3中引入了watch函数来监听数据的变化，包括对嵌套属性的变化。我们可以使用watch函数来监听嵌套属性的变化，并在变化发生时执行相应的逻辑。通过使用deep选项，我们还可以实现深度监听，以便在任何嵌套属性发生变化时都能够触发回调函数。这种能力使得我们能够更好地控制和响应数据的变化，提高了Vue.js在开发中的灵活性和便利性。