Vue.js watch監(jiān)視屬性知識(shí)點(diǎn)總結(jié)
這個(gè)屬性用來監(jiān)視某個(gè)數(shù)據(jù)的變化,并觸發(fā)相應(yīng)的回調(diào)函數(shù)執(zhí)行
1.基本用法
(1)添加watch屬性,值為一個(gè)對(duì)象。對(duì)象的屬性名就是要監(jiān)視的數(shù)據(jù),屬性值為回調(diào)函數(shù),每當(dāng)這個(gè)屬性名對(duì)應(yīng)的值發(fā)生變化,就會(huì)觸發(fā)該回調(diào)函數(shù)執(zhí)行
(2)回調(diào)函數(shù)有2個(gè)參數(shù):
newVal:數(shù)據(jù)發(fā)生改變后的值
oldVal:數(shù)據(jù)發(fā)生改變前的值
var vm = new Vue({ el:'#app', data: { name: '郭靖' }, watch: { name(newVal,oldVal){ console.log('name的值發(fā)生了變化') console.log(newVal,oldVal) } } }) vm.name = "郭大俠" // 執(zhí)行這行代碼,會(huì)觸發(fā)對(duì)應(yīng)的回調(diào)函數(shù)
執(zhí)行結(jié)果:
name的值發(fā)生了變化 郭大俠 郭靖
2.監(jiān)聽對(duì)象內(nèi)部屬性的變化
前面的例子只是監(jiān)聽data中的第一層數(shù)據(jù),如果要監(jiān)聽多層次的數(shù)據(jù),例如a.b.c,則屬性名需要用引號(hào)包裹起來
<body> <div id="app"> <p>{{name}}</p> <button @click="test">修改wife.name</button> <button @click="test2">修改wife</button> </div> </body> <script> var vm = new Vue({ el:'#app', data: { name: '郭靖', age: 20, wife: { name: '黃蓉', sex: '女' } }, watch: { //監(jiān)聽wife中的name屬性 'wife.name'(newVal,oldVal){ console.log('wife.name發(fā)生了改變') }, //監(jiān)聽wife 'wife'(newVal,oldVal){ console.log('wife發(fā)生了改變') } }, methods:{ test(){ this.wife.name = "'黃幫主'" }, test2(){ this.wife = {name:'我不是黃蓉',sex:'women'} } } }) </script>
運(yùn)行結(jié)果表明,無論是他父級(jí)對(duì)象的值發(fā)生了改變,還是它本身的值發(fā)生了改變,都會(huì)使這個(gè)監(jiān)視屬性的回調(diào)函數(shù)執(zhí)行。
3.監(jiān)聽路由變化
提示:路由的路徑信息保存在$route.path中
watch:{ '$route.path':function(newval){ console.log('change') } }
4.深度監(jiān)聽
監(jiān)視屬性只能監(jiān)聽到當(dāng)前對(duì)象值的變化,而對(duì)象內(nèi)部的屬性變化不會(huì)監(jiān)聽到,前面我們監(jiān)聽了wife和wife.name,修改了wife.name并不會(huì)觸發(fā)監(jiān)聽wife的回調(diào)函數(shù)。
想要監(jiān)聽對(duì)象內(nèi)部的屬性值變化,需要進(jìn)行相應(yīng)的配置。
- deep:深度監(jiān)聽,默認(rèn)false
- handler:回調(diào)函數(shù)
- immediate:頁面初始化時(shí)是否觸發(fā)回調(diào),默認(rèn)false
var vm = new Vue({ el:'#app', data: { name: '郭靖', age: 20, wife: { name: '黃蓉', sex: '女' } }, watch: { wife:{ deep:true, handler:function(newVal,oldVal){ console.log('value is change') }, immediate:true } } }) vm.wife.name = '黃幫主' // 觸發(fā)wife屬性對(duì)應(yīng)的回調(diào)
以上就是關(guān)于Vue.js watch監(jiān)視屬性的全部知識(shí)點(diǎn),感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。
相關(guān)文章
vue3利用customRef實(shí)現(xiàn)防抖
防抖就是對(duì)于頻繁觸發(fā)的事件添加一個(gè)延時(shí)同時(shí)設(shè)定一個(gè)最小觸發(fā)間隔,防抖大家都學(xué)過,但是如何在?Vue3?里中將防抖做到極致呢,下面小編就來和大家詳細(xì)講講2023-10-10Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08在Vue中使用Avue、配置過程及實(shí)際應(yīng)用小結(jié)
在項(xiàng)目中遇到通過點(diǎn)擊加號(hào)實(shí)現(xiàn)輸入框的增加、以及對(duì)該輸入框的輸入內(nèi)容進(jìn)行驗(yàn)證,通過這些誘導(dǎo)因素創(chuàng)作的這篇文章,本文重點(diǎn)給大家介紹在Vue中使用Avue、配置過程以及實(shí)際應(yīng)用,需要的朋友可以參考下2022-10-10Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析,技術(shù)點(diǎn)較多,所以篇幅較長,認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí),需要的朋友可以參考下2022-09-09