vue中watch的用法總結
阿新 • • 發佈:2018-04-20
true strong mode 使用 調用 edi 包括 bsp ron
首先確認 watch是一個對象,一定要當成對象來用。 對象就有鍵,有值。
鍵:就是你要監控的那個家夥,比如說$route,這個就是要監控路由的變化,或者是data中的某個變量。
值可以是函數:就是當你監控的家夥變化時,需要執行的函數,這個函數有兩個形參,第一個是當前值,第二個是變化後的值。
值也可以是函數名:不過這個函數名要用單引號來包裹。
第三種情況厲害了。 值是包括選項的對象:選項包括有三個。
1、第一個handler:其值是一個回調函數。即監聽到變化時應該執行的函數。
2、第二個是deep:其值是true或false;確認是否深入監聽。(一般監聽時是不能監聽到對象屬性值的變化的,數組的值變化可以聽到。)
3、第三個是immediate:其值是true或false;確認是否以當前的初始值執行handler的函數
var vm = new Vue({
data: {
a: 1,
b: 2
},
watch: {
a: function (val, oldVal) {
console.log(‘new: %s, old: %s‘, val, oldVal)
},
// 方法名
b: ‘someMethod‘,
// 選項的對象
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true,
immediate: true
}
}
})
具體的用法可以直接看下面的示例,簡單直接
<div id="app">
<input type="text" v-model:value="childrens.name" />
<input type="text" v-model:value="lastName" />
</div>
<script type="text/javascript ">
var vm = new Vue( {
el: ‘#app‘,
data: {
childrens: {
name: ‘小強‘,
age: 20,
sex: ‘男‘
},
tdArray:["1","2"],
lastName:"張三"
},
watch:{
childrens:{
handler:function(val,oldval){
console.log(val.name)
},
deep:true//對象內部的屬性監聽,也叫深度監聽
},
‘childrens.name‘:function(val,oldval){
console.log(val+"aaa")
},//鍵路徑必須加上引號
lastName:function(val,oldval){
console.log(this.lastName)
}
},//以V-model綁定數據時使用的數據變化監測
} );
vm.$watch("lastName",function(val,oldval){
console.log(val)
})//主動調用$watch方法來進行數據監測</span>
</script>
</body>
vue中watch的用法總結