watch监听简单数据类型可以监听到数据变化
<template>
<div>
<button @click="btn">点击改变</button>
</div>
</template>
<script>
export default {
name: "Btn",
data() {
return {
bbb:"aaa",
};
},
methods: {
btn() {
this.bbb="ccc"
}
},
watch: {
bbb: {
handler(newValue, oldValue) {
console.log("新的",newValue);
console.log("旧的",oldValue);
console.log(newValue === oldValue);
},
deep: true
}
}
};
</script>
<style></style>
watch监听是对象和数组数的数据变化但是新旧是更新后的
<template>
<div>
<button @click="btn">点击改变</button>
</div>
</template>
<script>
export default {
name: "Btn",
data() {
return {
bbb:"aaa",
ccc:123,
aaa: {
pokerState: 53
}
};
},
methods: {
btn() {
this.bbb="ccc"
this.aaa.pokerState = 555555;
}
},
// created() {
// this.aaa.pokerState = 54;
// },
watch: {
aaa: {
handler(newValue, oldValue) {
console.log("新的", JSON.stringify(newValue));
console.log("旧的", JSON.stringify(oldValue));
console.log(newValue === oldValue);
},
deep: true,
immediate: true
}
}
};
</script>
<style></style>
watch监听是对象和数组数的数据变化方法
<template>
<div>
<button @click="btn">点击改变</button>
</div>
</template>
<script>
export default {
name: "Btn",
data() {
return {
bbb: "aaa",
ccc: 123,
aaa: {
pokerState: 53,
aa:[11,222,3333]
}
};
},
methods: {
btn() {
// debugger
// this.bbb = "ccc";
this.aaa.pokerState = 555555;
// this.aaa = 555555;
// this.aaa.aa[2]=6666
}
},
computed: {
str() {
return JSON.stringify(this.aaa)
}
},
// created() {
// this.aaa.pokerState = 54;
// },
watch: {
'str': {
handler(newValue, oldValue) {
// debugger
console.log("新的str", JSON.parse(newValue));
console.log("旧的str", JSON.parse(oldValue));
console.log(newValue === oldValue, this.aaa);
}
},
deep: true,
immediate: true
}
}
};
</script>
<style></style>