浅析Vue3响应式数据与watch属性

什么是Vue3响应式数据？

在 Vue3 中，响应式数据是通过函数 reactive() 创建的一个响应式对象，它通过 Proxy 对象来监听对象的变化，使得当对象发生改变时，视图会自动更新。我们可以通过下面的代码来创建一个响应式对象：

import { reactive } from 'vue'

const state = reactive({
  message: 'Hello Vue3'
})

在上面的代码中，我们通过 reactive() 函数创建了一个响应式对象 state，它有一个属性 message，初始值为 Hello Vue3。

如何使用watch属性

在 Vue3 中，我们可以通过 watch 函数来监听一个数据的变化，从而做出相应的响应。

我们可以通过 watch 函数来监听 reactive 对象的变化：

import { watch } from 'vue'

// 监听 state 对象的 message 属性
watch(() => state.message, (newValue, oldValue) => {
  console.log(`new value: ${newValue}, old value: ${oldValue}`)
})

在上面的代码中，我们使用了 watch 函数来监听 state.message 属性的变化，当 state.message 发生改变时，会执行回调函数，并输出新旧值。

除了监听简单类型数据的变化之外，我们也可以监听对象的变化。

const obj = reactive({
  name: 'Jack',
  age: 25,
  address: {
    city: 'New York',
    street: 'Broadway'
  }
})

watch(() => obj, (newValue, oldValue) => {
  console.log('obj changed:', newValue, oldValue)
}, { deep: true })

obj.address.city = 'San Francisco'

在上面的代码中，我们在 watch 函数中监听 obj 对象的变化，并设置 deep 选项为 true，表示监听对象的深层变化。当 obj.address.city 属性改变时，会执行回调函数，并输出 obj 对象的新旧值。

示例说明

示例1：监听响应式对象的变化

在下面的示例中，我们通过 reactive() 函数创建一个响应式对象 state，它有一个属性 message，初始值为 Hello Vue3，我们通过 watch 函数来监听 state.message 的变化。

<template>
  <div>
    <p>{{ state.message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue3'
    })

    watch(() => state.message, (newValue, oldValue) => {
      console.log(`new value: ${newValue}, old value: ${oldValue}`)
    })

    function changeMessage() {
      state.message = 'Hello World'
    }

    return {
      state,
      changeMessage
    }
  }
}
</script>

在上面的代码中，我们在 watch 回调函数中输出了 state.message 的新旧值，在页面上我们展示了 state.message 的值，并且有一个 Change Message 按钮，当我们点击该按钮时，会改变 state.message 的值。

示例2：监听对象的深层变化

在下面的示例中，我们通过 reactive() 函数创建一个包含嵌套对象的响应式对象 person，通过点击按钮来修改它的深层属性值：

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
    <p>City: {{ person.address.city }}</p>
    <button @click="changeCity">Change City</button>
  </div>
</template>

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

export default {
  setup() {
    const person = reactive({
      name: 'Jack',
      age: 25,
      address: {
        city: 'New York',
        street: 'Broadway'
      }
    })

    watch(() => person, (newValue, oldValue) => {
      console.log('person changed:', newValue, oldValue)
    }, { deep: true })

    function changeCity() {
      person.address.city = 'San Francisco'
    }

    return {
      person,
      changeCity
    }
  }
}
</script>

在上面的代码中，我们在 watch 回调函数中输出了 person 对象的新旧值，在页面上我们展示了 person 对象的属性，并且有一个 Change City 按钮，当我们点击该按钮时，会改变 person.address.city 的值，从而触发 watch 函数的回调函数。