vue如何实现数据监听
Vue 数据监听的实现方式
Vue 提供了多种方式实现数据监听，核心机制基于响应式系统，以下是常见方法：
使用 data 和响应式属性
在 Vue 组件中，data 返回的对象会被自动转换为响应式数据，属性变化时会触发视图更新。
export default {
data() {
return {
message: 'Hello Vue'
}
},
methods: {
updateMessage() {
this.message = 'Updated!'; // 触发响应式更新
}
}
}计算属性 (computed)
计算属性基于依赖的响应式数据自动缓存和更新，适合衍生数据的监听。
export default {
data() {
return { count: 0 }
},
computed: {
doubledCount() {
return this.count * 2; // 当 count 变化时自动更新
}
}
}侦听器 (watch)
watch 用于监听特定数据的变化，可执行异步或复杂逻辑。
export default {
data() {
return { userInput: '' }
},
watch: {
userInput(newVal, oldVal) {
console.log('输入变化:', newVal);
}
}
}深度监听对象
通过 deep: true 监听对象内部属性的变化。
watch: {
obj: {
handler(newVal) {
console.log('对象变化:', newVal);
},
deep: true // 监听嵌套属性
}
}Vue 3 的 ref 和 reactive
Vue 3 的 Composition API 提供 ref 和 reactive 创建响应式数据。
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newVal) => {
console.log('count 变化:', newVal);
});
return { count };
}
}手动触发监听
通过 $watch 动态创建侦听器，适合需要灵活控制的场景。
export default {
mounted() {
this.$watch('message', (newVal) => {
console.log('动态监听:', newVal);
});
}
}注意事项
- 避免直接修改数组索引或对象属性，应使用
Vue.set或数组的变异方法（如push）。 - 性能敏感场景慎用深度监听（
deep: true），可能影响性能。 - Vue 3 的响应式系统基于 Proxy，相比 Vue 2 的
Object.defineProperty能更好地监听动态属性。
