Vue种的监听器主要是来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
案例:
<template>
<div>
值:{{watchData}}
<br/><br/>
<button @click="watchClcik">改变值</button>
</div>
</template>
<script>
export default {
data(){
return {
watchData: undefined
}
},
methods:{
watchClcik(){
this.watchData = {
name: 'name:' + (Math.random() * 10) .toFixed();
}
}
},
watch:{
// 监听watchData数据变化
watchData(value, oldValue){
console.log('改变的值:');
console.log(value);
console.log('旧值:');
console.log(oldValue);
}
}
}
</script>