watch內(nèi)部調(diào)用methods方法報(bào)錯(cuò)

錯(cuò)誤例子還原

例子

<script>
	export default{
		data(){
			return {
				data: 1,
			}
		},
		watch: {
			data: (newV, oldV) => {
				this.printf() // 此處調(diào)用會(huì)出現(xiàn) undefined
			}
		},
		methods: {
			printf(){
				console.log("111111")
			}
		}		
	}
</script>

錯(cuò)誤原因

在vue的Watch監(jiān)聽器要注意一點(diǎn)，那就是watch的內(nèi)部的監(jiān)聽方法，一定一定不要使用箭頭表達(dá)式，正確的寫法應(yīng)該是

watch: {
?? ?data: function(newV, oldV){
?? ??? ?this.printf
?? ?}
}

關(guān)于watch使用方式的vue官方鏈接

理解methods,computed,watch的調(diào)用時(shí)機(jī)

最近在學(xué)Vue框架的 時(shí)候?qū)ethods,computed不甚理解，看了幾篇?jiǎng)e人寫的博客感覺描述的也很模糊，故而在稍微明白他們之間主要差異的時(shí)候，寫文章記錄下。

1.methods中定義的函數(shù)

其調(diào)用時(shí)機(jī)是：當(dāng)頁面引用了vue data關(guān)鍵字的屬性，并且這些屬性發(fā)生改變的時(shí)候，就會(huì)執(zhí)行methods中定義的函數(shù)，并且不管methods中定義的函數(shù)是否依賴了data關(guān)鍵字中的屬性，methods中定義的函數(shù)都會(huì)被執(zhí)行。methods中定義的函數(shù)能像普通函數(shù)那樣，當(dāng)主動(dòng)調(diào)用methods中定義的函數(shù)的時(shí)候，這些函數(shù)每次調(diào)用都會(huì)執(zhí)行。

 2.computed中定義的函數(shù)

在computed中定義的函數(shù)的調(diào)用時(shí)機(jī)是：當(dāng)頁面引用了vue data關(guān)鍵字的屬性，并且這些屬性發(fā)生改變的時(shí)候，如果computed中定義的函數(shù)也依賴了這些改變的屬性，那么computed中定義的函數(shù)才會(huì)被執(zhí)行。

也就是computed中定義的函數(shù)被Vue框架回調(diào)的條件是

• 1.函數(shù)內(nèi)依賴了vue的屬性
• 2.這些屬性發(fā)生了改變
• 3.這些屬性被頁面引用

這三個(gè)條件同時(shí)滿足，才會(huì)觸發(fā)computed中定義的某個(gè)函數(shù)的回調(diào)。而且和methods定義的函數(shù)，其調(diào)用語法也是不一樣的，computed中定義的函數(shù)，調(diào)用的時(shí)候后面不能有小括號(hào)，類似屬性的調(diào)用。

并不是每次主動(dòng)調(diào)用computed中定義的函數(shù)都會(huì)執(zhí)行，computed中定義的函數(shù)即使是主動(dòng)調(diào)用，其是否會(huì)執(zhí)行也和內(nèi)部的依賴屬性是否發(fā)生改變有關(guān)。

3.watch中定義的方法

是用來監(jiān)聽某個(gè)屬性發(fā)生變化的時(shí)候，觸發(fā)回調(diào)。在watch中定義方法的時(shí)候，方法的鍵必須是vue中已經(jīng)定義的屬性。

new Vue({
? el: "#app",
? data: {
? ?num: 1,
? ?num2: 2,
? ?value3: 88
? ?
? },
? methods: {
? ? ?getNum:function(){ //每次更新頁面的時(shí)候就會(huì)執(zhí)行
? ? ? ? ? ?alert("methods");
? ? ? ? ? ?return "現(xiàn)在的num：";
? ? ?}
? },
? ?computed: {
? ? ? getNum2:function(){ //第一次執(zhí)行，后面當(dāng)依賴的屬性發(fā)生改變的時(shí)候執(zhí)行
? ? ? alert("computed");
? ? ? ? return "num2："+ this.num2;
? ? ?}
? },
? watch: {
? ?value3: function(value){ ?//value3是已經(jīng)在data中定義的屬性，value是該屬性發(fā)生改變的時(shí)候的值
? ? alert(" 現(xiàn)在的value："+ value);
? ?}
? }
})

<div id="app">
<p>{{num}}</p>
<p>{{getNum()}}</p>
<button v-on:click="num++">Num++</button>
<button v-on:click="num--">Num--</button>
<button v-on:click="num2++">Num2++</button>
<button v-on:click="value3++">value3++</button>
</div>

上面的理解，來源于代碼運(yùn)行情況的測試和總結(jié)，或有不周到之處，還望讀者見諒。 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評論