vue.js监听

在Vue.js中，监听（watching）是一种响应式技术，用于观察和响应Vue实例上的数据变动。Vue提供了一个watch选项，允许开发者指定一个或多个数据源，并定义当这些数据变化时应该执行的回调函数。

基础概念

响应式数据：Vue.js的核心特性之一是响应式系统，它使得数据和DOM保持同步。当数据变化时，Vue会自动更新DOM。
监听器（Watcher）：在Vue中，监听器是一种机制，用于观察数据的变化并执行相应的回调函数。

类型

深度监听：通过设置deep: true，可以监听对象内部属性的变化。
立即执行：通过设置immediate: true，可以在监听开始时立即执行回调函数。

应用场景

表单验证：监听表单输入的变化，实时验证用户输入。
异步操作：数据变化时触发异步请求，如搜索建议。
复杂计算：基于响应式数据进行复杂的计算，并更新视图。

示例代码

<template>
<div>
<input v-model="message" placeholder="Type something...">
<p>Message is: {{ message }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: ''
};
},
watch: {
// 监听message的变化
message(newVal, oldVal) {
console.log(`Message changed from ${oldVal} to ${newVal}`);
// 这里可以执行更多的操作，比如调用API等
}
}
};
</script>

遇到的问题及解决方法

监听器不触发：确保被监听的数据是响应式的，且在Vue实例的data选项中声明。如果数据是对象或数组，且需要深度监听，记得设置deep: true。
性能问题：避免监听大量数据或执行耗时操作。可以使用计算属性（computed properties）来缓存结果，减少不必要的计算。
内存泄漏：在组件销毁时，确保移除所有的监听器，避免内存泄漏。

Vue 3中引入了Composition API，提供了更灵活的监听方式，使用watch和watchEffect函数可以更方便地实现响应式监听。

import { ref, watch } from 'vue';

export default {
setup() {
const message = ref('');

watch(message, (newVal, oldVal) => {
console.log(`Message changed from ${oldVal} to ${newVal}`);
});

return {
message
};
}
};

在Vue 3中，watchEffect会自动追踪其内部使用的响应式数据，并在这些数据变化时重新运行。

import { ref, watchEffect } from 'vue';

export default {
setup() {
const message = ref('');

watchEffect(() => {
console.log(`Message is now: ${message.value}`);
});

return {
message
};
}
};

通过以上方法，可以在Vue.js中有效地监听数据变化，并执行相应的逻辑。