在Vue.js中,监听(watching)是一种响应式技术,用于观察和响应Vue实例上的数据变动。Vue提供了一个watch
选项,允许开发者指定一个或多个数据源,并定义当这些数据变化时应该执行的回调函数。
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>
data
选项中声明。如果数据是对象或数组,且需要深度监听,记得设置deep: true
。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中有效地监听数据变化,并执行相应的逻辑。
没有搜到相关的文章