Vue中watch和methods兩種屬性的作用

Posted on by

vue中watch是專門用來觀察和響應vue實例上的數據變動的，語法如下：

watch: {
    被監聽的數據: {
        handler(數據改變後的值, 數據改變之前的值) {
            相關代碼邏輯
        }
    }
}

  • 被監聽的數據：data中定義的數據；
  • 數據改變後的值：新值；
  • 數據改變之前的值：舊值；

1、普通數據類型實例

		<input type="text" v-model="userName"/> 
		//監聽當userName值發生變化時觸發
		watch: {
			userName (newName, oldName) {
				console.log(newName)
			}
		}
		//或
		watch: {
			userName: {
				handler (newName, oldName) {
					console.log(newName)
				},
				immediate: true
			}
		}

註意：當值第一次綁定的時候不會執行監聽函數，隻有當值改變的時候才會執行。如果我們想在第一次綁定的時候執行此監聽函數，則需要設置immediate為true。

2、對象類型實例

		<input type="text" v-model="cityName.name" />
		data (){
			return {
				cityName: {name:'北京'}
			}
		},
		watch: {
			cityName: {
				handler(newName, oldName) {
					console.log(newName)
				},
				immediate: true,
				deep: true
			}
		}

註意：當需要監聽對象的改變時，此時就需要設置deep為true。

vue中methods是方法屬性，在裡面定義方法，語法如下：

methods:{
    //在此處定義方法
    方法名1() {
    },
    方法名2() {
    }
}

實例

<button class="btn btn-primary" @click="doAdd">添加</button>
methods : {
         //這裡面定義瞭一個doAdd的方法.
         doAdd() {
               console.log(“hello”);
               //通過axios發送請求
                axios.get(url).then(response =>{
                    console.log(response.data);
                });
            }
        }
}

到此這篇關於Vue中watch和methods兩種屬性的作用的文章就介紹到這瞭,更多相關Vue watch和methods內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：