vue怎么实现数据监听

Vue 数据监听实现方法

Vue 提供了多种方式实现数据监听，核心机制基于响应式系统。以下是常见的实现方法：

使用 watch 选项

在组件选项中定义 watch 对象，监听特定数据的变化：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count从${oldVal}变为${newVal}`)
    }
  }
}

计算属性 computed

通过计算属性自动追踪依赖，当依赖数据变化时重新计算：

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}

$watch API

在组件实例中动态添加监听器：

export default {
  created() {
    this.$watch(
      () => this.count,
      (newVal, oldVal) => {
        console.log('count变化:', newVal, oldVal)
      }
    )
  }
}

深度监听对象

添加 deep: true 选项可深度监听对象内部变化：

watch: {
  user: {
    handler(newVal) {
      console.log('user对象变化', newVal)
    },
    deep: true
  }
}

立即触发监听

配置 immediate: true 使监听器立即执行一次：

watch: {
  value: {
    handler(newVal) {
      console.log('初始值:', newVal)
    },
    immediate: true
  }
}

监听数组变化

Vue 能检测以下数组方法触发的变更：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

注意事项

• 对象新增属性需使用 Vue.set() 或 this.$set() 使其响应式
• 数组直接通过索引修改元素需使用 Vue.set() 或数组方法
• 异步更新队列可能导致监听触发时机与预期不同