methods雳攘，watch和computed都是以函數(shù)為基礎(chǔ)的，但各自卻都不同枫笛；
1吨灭，methods
不存在緩存，執(zhí)行一次運(yùn)行一次刑巧，執(zhí)行n次喧兄，運(yùn)行n次
2，computed
使用場景：當(dāng)頁面中有某些數(shù)據(jù)依賴其他數(shù)據(jù)進(jìn)行變動(dòng)的時(shí)候海诲，可以使用計(jì)算屬性
計(jì)算屬性 computed 是基于data中數(shù)據(jù)進(jìn)行處理的繁莹，data數(shù)據(jù)變化，他也跟著變化
當(dāng)data中數(shù)據(jù)沒有發(fā)生改變時(shí)特幔，我們調(diào)用computed中函數(shù)n次咨演，只會(huì)進(jìn)行緩存（執(zhí)行一次）
每個(gè)計(jì)算屬性都包含兩個(gè)set、get 屬性
<div>{{get}} </div> //調(diào)用時(shí)候蚯斯，直接寫上函數(shù)名即可
computed: {
get: function () { //這里不適合寫 get()薄风，語法規(guī)定
return this.firstName + ' ' + this.lastName;// 必須要有return
},
}
2，watch
使用場景：數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作拍嵌，可以隨時(shí)修改狀態(tài)的變化
watch:類似于監(jiān)聽機(jī)制+事件機(jī)制遭赂。
在大部分情況下我們都會(huì)使用computed，但如果要在數(shù)據(jù)變化的同時(shí)進(jìn)行異步操作或者是比較大的開銷横辆，那么watch為最佳選擇撇他。watch為一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式狈蚤，值是對(duì)應(yīng)回調(diào)函數(shù)困肩。值也可以是方法名，或者包含選項(xiàng)的對(duì)象脆侮。
// 這里直接用 v-model 來綁定锌畸，不需要添加 change 事件
<input type="text" v-model="nameValue" style="margin-top:15px" /> {{tip}}
data() {
return {
nameValue: "",
tip: ""
};
},
methods: {
checkName(value) {
var that = this;
setTimeout(() => {
if (value == "admin") {
that.tip = "用戶名已存在";
} else {
that.tip = "用戶名可以使用";
}
}, 2000);
}
},
watch: {// 數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作
nameValue(value) {
this.checkName(value);
this.tip = "正在驗(yàn)證......";
}
}
2，watch的兩種用法
注靖避，上面的watch方法是當(dāng)改變值時(shí)候潭枣，才會(huì)觸發(fā)監(jiān)聽事件，但是我們想剛進(jìn)入頁面時(shí)候幻捏，就觸發(fā)監(jiān)聽事件盆犁，就要用handler（）方法
data() {
return {
a: {
b: {
c: ' '
}
}
};
},
1，handler（）：當(dāng)頁面剛進(jìn)入時(shí)篡九，自動(dòng)綁定watch事件蚣抗，不需要進(jìn)行觸發(fā)
watch: {// 頁面加載時(shí)，就自動(dòng)觸發(fā)此事件
a :{
handler(new){
this.checkName(value);
this.tip = "正在驗(yàn)證......";
},
immediate: true, // 代表在wacth里聲明了firstName這個(gè)方法之后立即先去執(zhí)行handler方法
deep:true // 意味著開啟深度監(jiān)聽，對(duì)象 a 里面有任何數(shù)據(jù)變化都會(huì)觸發(fā)handler函數(shù)
}
}
注：
- immediate屬性：布爾值
immediate：true：首次加載就監(jiān)聽數(shù)據(jù)變化
immediate：false：只有發(fā)生改變才監(jiān)聽 - deep:true翰铡；是開啟深層次的監(jiān)聽，即所有屬性都加上監(jiān)聽器讽坏，如果其中一個(gè)發(fā)生改變了就執(zhí)行handler函數(shù)锭魔。
2，第二種
watch: {
'a.b.c' : function(){ // 第一種
this.checkName(value);
this.tip = "正在驗(yàn)證......";
}
}
