Vue中的?watch監(jiān)聽屬性詳情
更新時間：2022年01月24日 13:52:30 作者：huxiaoxiao.
這篇文章主要介紹了Vue中的?watch監(jiān)聽屬性詳情，mputed計算屬性用來監(jiān)聽多個數據；watch?監(jiān)聽單個數據；本文將具體介紹的是?watch監(jiān)聽屬性，感興趣的小伙伴可以參考一下文章的具體內容，希望對你有所幫助
首先要確認 watch是一個對象，要當成對象來使用。
鍵：就是那個，你要監(jiān)聽的那個家伙；
值：可以是函數，當你監(jiān)控的家伙發(fā)生變化時，需要執(zhí)行的函數，這個函數有兩個形參
第一個是當前值（新的值），第二個是更新前的值（舊值）
值也可以是函數名：不過這個函數名要用單引號來包裹。
值是包括選項的對象：選項包括有三個。
- 1.第一個
handler：其值是一個回調函數。即監(jiān)聽到變化時應該執(zhí)行的函數。 - 2.第二個是
deep：其值是 true 或 false；確認是否深入監(jiān)聽。(一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的，數組的值變化可以聽到。) - 3.第三個是
immediate：其值是 true 或 false；確認是否以當前的初始值執(zhí)行 handler 的函數。
一.watch監(jiān)聽一般數據的變化(數值，字符串，布爾值)
舉例說明：
1.數值
在data數據中心的num，當我們通過點擊事件讓它發(fā)生變化時，通過watch監(jiān)聽屬性監(jiān)聽它的變化
<div id="app">
<p>{{num}}</p>
<button @click="num++">點擊加一</button>
</div>
let vm = new Vue({
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 監(jiān)聽 復雜類型數據的變化
deep 屬性：深度監(jiān)聽對象變化 (代表是否深度監(jiān)聽)，當需要監(jiān)聽一個對象的改變時，普通的 watch 方法無法監(jiān)聽到對象內部屬性的改變，此時就需要 deep 屬性對對象進行深度監(jiān)聽。
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監(jiān)聽屬性監(jiān)聽對象時新舊值時相同的
handler(newval){
console.log("新值為："+this.mes.name);
},
deep:true
}
}
})
在文本框中輸入內容后，查看控制臺：
也可以在對象中添加num，通過滑動桿來控制num的值，并監(jiān)聽：
<input type="range" v-model="mes.num">
data:{
mes:{name:'',num:''}
},
watch: {
mes:{
// watch監(jiān)聽屬性監(jiān)聽對象時新舊值時相同的
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="./js/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:{
// 監(jiān)聽數組的時候不需要深度監(jiān)聽，不需要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.js"></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對象中監(jiān)聽的數據，一定是數據中心data中已經存在的數據
// watch監(jiān)聽數組對象 新，舊值是相等，但是監(jiān)聽數組的時候，不需要 深度監(jiān)聽！
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',
data:{
list:[
{id:1,name:'ww'},
{id:2,name:'ee'},
{id:3,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監(jiān)聽屬性詳情的文章就介紹到這了,更多相關Vue中的 watch監(jiān)聽屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue實現記事本案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在Vue中實現模糊查詢,你可以使用JavaScript的filter和includes方法,結合Vue的v-for指令,本文給大家舉了一個簡單的示例,并通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2024-01-01
在大部分實際場景中,我們都可以構建單頁應用來進行項目的開發(fā)和迭代,然而對于項目復雜度過高或者頁面模塊之間差異化較大的項目,我們可以選擇構建多頁應用來實現,那么什么是多頁應用,本文就給大家介紹了Vue使用pages構建多頁應用的實現步驟2024-12-12
這篇文章主要介紹了vue運行卡死的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue的開發(fā)體驗還是比較愉悅的。首先文檔非常友好，所以上手會比較快。其次，配合webpack和vue-loader，每個頁面都是一個.vue文件，寫起來很方便。所以很適合做組件化開發(fā)，這篇文章我們就來一起看看webpack+vue.js如何實現組件化。2016-10-10
本文主要介紹了vue實現接口封裝的實現示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-11-11
這篇文章主要介紹了Vue實現全局的toast組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實現方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue Easytable是一個基于Vue.js的數據表格組件庫,它提供豐富的功能和靈活的配置,幫助開發(fā)者快速搭建復雜的數據表格界面,這篇文章主要介紹了vue easytable組件使用,需要的朋友可以參考下2023-09-09
本文主要介紹了Vite性能優(yōu)化之分包策略的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05