Vue中的 watch監聽屬性詳情
阿新 • • 發佈：2021-12-05
目錄
- 一.watch監聽一般資料的變化(數值，字串，布林值)
- 1.數值
- 2.字串
- 3.布林值
- 二.watch 監聽 複雜型別資料的變化
- 1.物件
- 2.陣列
- 3.物件陣列
- 4.物件數組的屬性
首先要確認 watch是一個物件，要當成物件來使用。
鍵：就是那個，你要監聽的那個傢伙；
值：可以是函式，當你監控的傢伙發生變化時，需要執行的函式，這個函式有兩個形參
第一個是當前值（新的值），第二個是更新前的值（舊值）
值也可以是函式名：不過這個函式名要用單引號來包裹。
值是包括選項的物件：選項包括有三個。
- 1.第一個
handler：其值是一個回撥函式。即監聽到變化時應該執行的函式。 - 2.第二個是
deep：其值是 true 或 false；確認是否深入監聽。(一般監聽時是不能監聽到物件屬性值的變化的，陣列的值變化可以聽到。) - 3.第三個是
immediate：其值是 true 或 false；確認是否以當前的初始值執行 handler 的函式。
一.watch監聽一般資料的變化(數值，字串，布林值)
舉例說明：
1.數值
在data資料中心的num，當我們通過點選事件讓它發生變化時，通過watch監聽屬性監聽它的變化
<div id="app">
<p>{{num}}</p>
<button @click="num++">點選加一</button>
</div>
let vm = new ({
el:'#app',data:{
num:0
},watch:{
// 當前值（已經改變的值）newval 舊值 oldval
num:function(newval,oldval){
console.log("新值是："+newval);
console.log("舊值是："+oldval);
}
}
})
當我們點選按鈕時，檢視控制檯：
注意：在watch中還有其他兩種方法
watch:{
// 當前值（已經改變的值）newval 舊值 oldval
// num(newval,oldval){
// console.log("新值是："+newval);
// console.log("舊值是："+oldval);
// }
num:{
handler(newval,oldval){
console.log("新值是："+newval);
console.log("舊值是："+oldval);
}
}
}
輸出結果是一致的，下面的例子統一使用第三種方法，也就是帶handler的方法。
2.字串
<div id="app">
<input type="text" v-model="mes">
<p>輸入的內容為：{{mes}}</p>
</div>
let vm = new Vue({
el:'#app',data:{
mes:''
},watch:{
mes:{
handler(newval,oldval){
console.log("新的內容："+newval);
console.log("舊的內容："+oldval);
}
}
}
})
當我們在文字框內輸入內容時：
檢視輸出結果：
3.布林值
<div id="app">
<p v-show="isShow">通過修改布林值顯示和隱藏</p>
<button @click="isShow = !isShow">點選改變布林值</button>
</div>
let vm = new Vue({
el:'#app',data:{
isShow:true
},watch:{
isShow:{
handler(newval,oldval){
console.log("新的值："+newval);
console.log("舊的值："+oldval);
}
}
}
})
當點選按鈕切換時，檢視控制檯：
二.watch 監聽 複雜型別資料的變化
deep 屬性：深度監聽物件變化 (代表是否深度監聽)，當需要監聽一個物件的改變時，普通的 watch 方法無法監聽到物件內部屬性的改變，此時就需要 deep 屬性對物件進行深度監聽。
1.物件
<div id="app">
<input type="text" v-model="mes.name">
<p>輸入的內容是：{{mes.name}}</p>
</div>
let vm = new Vue({
el:'#app',data:{
mes:{name:''}
},watch: {
mes:{
// watch監聽屬性監聽物件時新舊值時相同的
handler(newval){
console.log("新值為："+this.mes.name);
},deep:true
}
}
})
在文字框中輸入內容後，檢視控制檯：
也可以在物件中新增num，通過滑動杆來控制num的值，並監聽：
<input type="range" v-model="mes.num">
data:{
mes:{name:'',num:''}
},watch: {
mes:{
// watch監聽屬性監聽物件時新舊值時相同的
handler(newval){
console.log("num新值："+this.mes.num);
},deep:true
}
}
滑動時檢視輸出結果：
2.陣列
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{item}}</li>
</ul>
<!-- 新增一個按鈕，點選時往陣列中新增一個新內容 -->
<button @click="add()">點選新增</button>
</div>
<script src=".//vue.js"></script>
<script>
let vm = new Vue({
el:'#app',data:{
arr:[1,2,3,4,5]
},methods:{
add(){
// 獲取當前陣列最大值
let cont = this.arr[this.arr.length-1];
// 自增
cont++;
// 向陣列最後一位新增元素
this.arr.push(cont);
}
},watch: {
arr:{
// 監聽陣列的時候不需要深度監聽，不需要deep
handler(newval){
console.log("新陣列為："+newval);
}
}
}
})
</script>
</body>
點選新增元素後，檢視輸出結果：
3.物件陣列
<body>
<div id="app">
<ul>
<li v-for="item in list">
{{item.id}}--{{item.name}}
</li>
</ul>
<!-- 定義文字框，向陣列中新增新的物件 -->
<input type="text" v-model="id">
<input type="text" v-model="name">
<button @click="add()">新增</button>
</div>
<script src="./js/vue.jswww.cppcns.com"></script>
<script>
let vm = new Vue({
el:'#app',data:{
list:[
{id:1,name:"哇哈"},{id:2,name:"哇哈哈"},{id:3,name:"哇哈哈哈"}
],id:"", name:''
},methods: {
// 將收到的輸入內容新增到陣列中
add(){
this.list.push({id:this.id,name:this.name});
// 清除文字框的內容
客棧 this.id=this.name=''
}
},watch:{
// 注意：watch物件中監聽的資料，一定是資料中心data中已經存在的資料
// watch監聽陣列物件 新，舊值是相等，但是監聽陣列的時候，不需要 深度監聽！
list:{
handler(newval){
newval.forEach((item)=>{
console.log(item.name);
})
}
}
}
})
</script>
</body>
新增新元素後檢視輸出結果：
4.物件陣列的屬性
<body>
<div id="app">
<ul>
<li v-for="x in list">
{{x.id}}---{{x.name}}  
<button @click="mod(x.id)">修改</button>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',name:'ww'},name:'ee'},name:'qq'}
],},methods: {
mod(id,name){
this.list.forEach((item)=>{
// 在遍歷的過程中做判斷，如果你點選的id就是你當前編輯的這一條資料
if(item.id == id){
item.name = "老鐵"
console.log(item);
}
})
}
},watch: {
list:{
handler(x,y){
x.forEach((element)=>{
console.log(element.name);
})
},deep:true
}
}
})
</script>
</body>
點選修改時，檢視輸出結果：
到此這篇關於Vue中的 watch監聽屬性詳情的文章就介紹到這了,更多相關Vue中的 watch監聽屬性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！