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

錯誤例子還原

例子

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

錯誤原因

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

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

關于watch使用方式的vue官方鏈接

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

最近在學Vue框架的 時候對methods,computed不甚理解，看了幾篇別人寫的博客感覺描述的也很模糊，故而在稍微明白他們之間主要差異的時候，寫文章記錄下。

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

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

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

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

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

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

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

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

3.watch中定義的方法

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

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

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

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

最新評論