watch可以用来检测vue实例上的数据变动
1、基础监测
<script> export default
{
name:'index',
data() {
return {
demo: '',
value: ''
}
},
watch: {
demo(val) {
this.value =this.demo
}
}
};
</script>
2、immediate属性
watch 的一个特点是，最初绑定的时候是不会执行的，要等到值改变时才执行监听计算。要使它最初绑定的时候就执行，使用immediate
watch: {
firstName: {
handler(newValue, oldValue) {
this.fullName = newValue + ' ' + this.lastName;
},
immediate: true
}
}
3、deep属性（默认为false）
代表是否深度监听，如一个obj里面的一个元素，如果不加deep则无法监测到obj里面的数据。
obj={'a':'1', 'b':'2'}
watch: {
obj: {
handler(newValue, oldValue) {
console.log(newValue);
},
deep: true
}
}
这样a和b的变化都能监测到.。
但监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。如果要监听obj里的单个变量，可以这样：
watch: {
'obj.a': {
handler(newValue, oldValue) {
console.log(newValue);
}
}
}
4、监测路由
watch: {
changeShowType(value) {
console.log("-----"+value);
},
'$route'(to, from){
console.log(to); //to表示去往的界面
console.log(from); //from表示来自于哪个界面
if(to.path=="/shop/detail"){
console.log("test");
}
}
}
