监听属性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