watch 是一個對象泊柬,一定要當(dāng)對象進行使用。對象則有 key 和 value
key 代表的是需要監(jiān)控的東西傻盟,比如:路由的變化或者data中某個變量
value: 有三種:
? 1艰管、函數(shù), 即當(dāng)監(jiān)控的key 發(fā)生變化是度秘,需要執(zhí)行的函數(shù), 第一個參數(shù)是新值喝峦,第二個參數(shù)是舊值势誊。
? 2、函數(shù)名: 該函數(shù)名需要單引號來包裹谣蠢。
3粟耻、包括選項的對象:
a、第一個handler:其值是一個回調(diào)函數(shù)眉踱。 即監(jiān)聽到變化時應(yīng)該執(zhí)行的函數(shù)挤忙。
b、第二個是deep: 其值是true或者false; 確認是否需要深入監(jiān)聽谈喳。(一般監(jiān)聽是不能監(jiān)聽到對象屬性值變化的册烈,數(shù)組的值變化可以監(jiān)聽到)
c、第三個是immediate: 其值是true或者false, 確認是否以當(dāng)前的初始值執(zhí)行handle的函數(shù)婿禽。
代碼示例:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>v-bind與v-model</title>
</head>
<body>
<div id="app" v-cloak>
<!-- watch 來響應(yīng)數(shù)據(jù)的變化 -->
<input type="text" v-model="cityName">
</div>
<!-- cdn的方式偶爾會卡赏僧,把js引入到本地 -->
<script src="vue.js"></script>
<script>
// watch 是一個對象,一定要當(dāng)對象進行使用扭倾。對象則有 key 和 value
//key 代表的是需要監(jiān)控的東西淀零,比如:路由的變化或者data中某個變量
//value: 有三種:
// ?1、函數(shù), 即當(dāng)監(jiān)控的key 發(fā)生變化是膛壹,需要執(zhí)行的函數(shù)窑滞, 第一個是當(dāng)前值,第二個是之前的值恢筝。
// ?2、函數(shù)名: 該函數(shù)名需要單引號來包裹
// 3巨坊、包括選項的對象:
/*
a撬槽、第一個handler:其值是一個回調(diào)函數(shù)。 即監(jiān)聽到變化時應(yīng)該執(zhí)行的函數(shù)趾撵。
b侄柔、第二個是deep: 其值是true或者false; 確認是否需要深入監(jiān)聽共啃。(一般監(jiān)聽是不能監(jiān)聽到對象屬性值變化的,數(shù)組的值變化可以監(jiān)聽到)
c暂题、第三個是immediate: 其值是true或者false, 確認是否以當(dāng)前的初始值執(zhí)行handle的函數(shù)移剪。
*/
var app = new Vue({
el: '#app',
data: {
cityName: '上海'
},
watch: {
// ***value是一個函數(shù)
// cityName: function(newVal, oldVal){
// console.log('當(dāng)前值-->' + oldVal);
// console.log('變化后的值-->' + newVal);
// }
// *** value是一個函數(shù)名
cityName: 'citeNameChange'
},
methods: {
citeNameChange: function(newValue, oldValue) {
console.log("新的值:" + newValue);
console.log("老的值: " + oldValue);
}
}
})
</script>
</body>
</html>