Vue监听对象变化难题详解：巧用代理和手动触发

vue.js

2024-03-15 14:14:10

Vue Watch：巧妙监听对象变化

在Vue.js中，watch机制是监听数据变化并响应这些变化的有力工具。然而，当涉及到对象时，即使使用deep:true，你可能仍会遇到watch不触发的难题。本文将深入探讨Vue的watch机制，并提供解决此问题的高级策略。

Vue观测系统的本质

Vue采用“响应式系统”来跟踪数据变化。当对象属性被修改时，Vue将自动检测这些变化，触发相关联的watch回调。但要注意，Vue仅能跟踪对象自身的直接属性变化。对于嵌套对象或数组的更改，Vue无法自动检测。

watch的细微差别：对象监听

启用deep:true时，Vue将递归监听对象及其所有属性的变化。然而，对象中的数组或对象属性，Vue仍无法自动检测其内部元素的变化。这是因为Vue将数组和对象视为不可变的数据类型。

解决之道：强制Vue观测数组和对象

为了解决这个问题，你需要强制Vue观测数组和对象的内部元素。有两种主要方法：

1. ES6代理

使用ES6代理对象创建数组或对象的代理，将自动将内部更改转发给原始对象。Vue将检测代理上的这些更改，触发watch回调。

2. 手动触发更新

在代理不可行的情况下，使用Vue.set()手动触发Vue更新。Vue.set()递归设置对象的属性值，通知Vue内部元素的变化。

代码示例：ES6代理

import { reactive, watch } from 'vue'

export default {
  setup() {
    const fields = reactive(['field1', 'field2'])
    const crudModelCreate = reactive({})

    const watchFields = reactive([])
    watch(fields, (newVal, oldVal) => {
      // 强制观测watchFields数组内部元素
      newVal.forEach(field => watchFields.push(crudModelCreate[field]))
    }, { deep: false })

    watch(watchFields, () => {
      // 触发crudModelCreate的watch回调
    }, { deep: true })

    return { fields, crudModelCreate }
  }
}