vue对象监听如何实现

Vue 对象监听实现方法

Vue 提供了多种方式监听对象的变化，以下是常见的实现方法：

使用 watch 选项

在 Vue 实例中通过 watch 选项监听对象变化：

new Vue({
  data() {
    return {
      user: {
        name: 'John',
        age: 30
      }
    }
  },
  watch: {
    'user.name'(newVal, oldVal) {
      console.log(`Name changed from ${oldVal} to ${newVal}`)
    },
    user: {
      handler(newVal, oldVal) {
        console.log('User object changed', newVal)
      },
      deep: true // 深度监听
    }
  }
})

使用 $watch API

在组件内动态添加监听器：

export default {
  mounted() {
    this.$watch(
      'user.name',
      (newVal, oldVal) => {
        console.log(`Name changed from ${oldVal} to ${newVal}`)
      }
    )

    this.$watch(
      () => this.user,
      (newVal, oldVal) => {
        console.log('User object changed', newVal)
      },
      { deep: true }
    )
  }
}

使用计算属性

通过计算属性间接监听对象属性：

export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30
      }
    }
  },
  computed: {
    userName() {
      return this.user.name
    }
  },
  watch: {
    userName(newVal, oldVal) {
      console.log(`Name changed from ${oldVal} to ${newVal}`)
    }
  }
}

使用 Vue.set 或 this.$set

对于新增属性，需要使用特殊方法使其响应式：

this.$set(this.user, 'newProperty', 'value')
// 等同于
Vue.set(this.user, 'newProperty', 'value')

使用 Vue.observable

创建可观察对象（Vue 2.6+）：

const state = Vue.observable({
  count: 0
})

// 在组件中使用
export default {
  computed: {
    count() {
      return state.count
    }
  }
}

注意事项

• 深度监听 (deep: true) 会遍历对象所有属性，可能影响性能
• 数组变化需要特殊处理，推荐使用数组变更方法 (push/pop/shift/unshift/splice/sort/reverse)
• 对象属性添加/删除需要使用 Vue.set/Vue.delete 保证响应式
• Vue 3 中使用 reactive 和 ref 替代 Vue 2 的响应式系统