监听属性watch
Posted mijiujs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了监听属性watch相关的知识，希望对你有一定的参考价值。
immediate、deep
data() {
return {
firstName: "刘",
lastName: "XX",
fullName: "",
obj: {
a: 1
}
};
},
watch: {
// 最简单的监听列子
firstName(newValue, oldValue) {
this.fullName = this.firstName + this.lastName;
console.log(this.fullName);
},
// handler、immediate。immediate:true代表如果在wacth里声明了firstName之后，就会立即先去执行里面的handler方法，即在最初绑定的时候就执行监听
firstName: {
handler(newValue, oldValue) {
this.fullName = this.firstName + this.lastName;
console.log(this.fullName);
},
immediate: true
},
// deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler
obj: {
handler(newValue, oldValue) {
console.log("obj.a changed");
},
immediate: true,
deep: true
},
// 优化
"obj.a": {
handler(newValue, oldValue) {
console.log("obj.a changed");
},
immediate: true
}
},
注销watch
不注销会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。
监听路由
watch: {
$route (to, from) {
// to表示去往的页面
// from表示来自哪个页面
}
},
参考文献
https://www.cnblogs.com/yesu/p/9546458.html
以上是关于监听属性watch的主要内容，如果未能解决你的问题，请参考以下文章