watch可以用來檢測vue實(shí)例上的數(shù)據(jù)變動
1燎悍、基礎(chǔ)監(jiān)測
<script> export default
{
name:'index',
data() {
return {
demo: '',
value: ''
}
},
watch: {
demo(val) {
this.value =this.demo
}
}
};
</script>
2、immediate屬性
watch 的一個特點(diǎn)是韧掩，最初綁定的時候是不會執(zhí)行的，要等到值改變時才執(zhí)行監(jiān)聽計算旭等。要使它最初綁定的時候就執(zhí)行酌呆，使用immediate
watch: {
firstName: {
handler(newValue, oldValue) {
this.fullName = newValue + ' ' + this.lastName;
},
immediate: true
}
}
3、deep屬性（默認(rèn)為false）
代表是否深度監(jiān)聽搔耕，如一個obj里面的一個元素隙袁，如果不加deep則無法監(jiān)測到obj里面的數(shù)據(jù)。
obj={'a':'1', 'b':'2'}
watch: {
obj: {
handler(newValue, oldValue) {
console.log(newValue);
},
deep: true
}
}
這樣a和b的變化都能監(jiān)測到.弃榨。
但監(jiān)聽器會一層層的往下遍歷菩收，給對象的所有屬性都加上這個監(jiān)聽器，但是這樣性能開銷就會非常大了鲸睛，任何修改obj里面任何一個屬性都會觸發(fā)這個監(jiān)聽器里的 handler娜饵。如果要監(jiān)聽obj里的單個變量，可以這樣：
watch: {
'obj.a': {
handler(newValue, oldValue) {
console.log(newValue);
}
}
}
4腊凶、監(jiān)測路由
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");
}
}
}
