<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
例如,當前的vue檔案的data中有如下屬性:
data() { return { dialogFormVisible: false, } }
要監聽dialogFormVisible變數的資料變化,則程式碼如下:
watch: { dialogFormVisible: function(newVal, oldVal) { alert(newVal); alert(oldVal); } }
如果vuex中宣告的資料如下:
export default new Vuex.Store({ state: { avatar: "", }, mutations: {}, actions: {}, modules: {} });
則監聽的程式碼如下:
watch: { "$store.state.avatar": function(newValue, oldValue) { ... } },
Vue中可以使用監聽器監聽屬性的變化,並根據屬性變化作出響應。但一旦涉及到複雜資料的監聽(如Object,但陣列一般不需要,因為Vue針對陣列做了特殊處理)時就比較複雜了,本文解釋了使用watch監聽屬性變化的方法,包括複雜資料。
Vue watch最重要的使用場景是根據某屬性的變化執行某些業務邏輯:
<template> <input type="number" v-model.number="counter" /> </template>
<script> export default { name: "Counter", data: function() { return { counter: 0, }; }, watch: { counter: function(newV, oldV) { console.log('counter change to %d from %d', newV, oldV); }, } }; </script>
watch的基本用法很簡單:針對需要監聽的屬性定義個同名的函數即可,函數的第一個引數為變化後的值,第二個引數為變化前的值。
首先我們回顧一個JavaScript中的概念:複雜資料變數。“複雜”的原因在於變數只是一個參照,和C++中的指標類似,其儲存的不是真實的資料,而是資料的地址。比如對於一個object變數來說,新增屬性、刪除屬性、修改屬性的值都不會改變這個地址,這也可以說這個object變數沒有變化。不管所用的框架如何,基本定理肯定是生效的,所以Vue中監聽object也是一難題,特別是巢狀資料的監聽。
這裡的變化指的是地址的變化,能夠觸發變化最簡單的方式就是重新賦值。
<template> <div> <label>up trigger {{ counter.up }} times</label> <button @click="onTrigger('up')">Trigger Up</button> <br> <label>down trigger {{ counter.down }} times</label> <button @click="onTrigger('down')">Trigger down</button> </div> </template>
<script> export default { name: "Counter", data: function() { return { counter: { up: 0, down: 0, }, }; }, methods: { onTrigger: function(type) { this.counter[type] += 1; } }, watch: { counter: function(newV, oldV) { // 不會被觸發 console.log('counter change to %o from %o', newV, oldV); }, } }; </script>
針對counter的監聽不會被觸發,因為this.counter[type] += 1;並不會使this.counter變化(地址沒變)。那如果想要監聽到這個變化應該怎麼辦呢?一般來說有兩種方式:
使用deep引數
watch: { counter: { handler: function(newV, oldV) { console.log('counter change to %o from %o', newV, oldV); }, deep: true, } }
使用deep需要使用watch的完整形式:handler是監聽回撥函數,deep: true指定了不僅僅監聽counter的變化,也監聽其內部屬性的變化,所以當counter.up或counter.down變化時才能出發handler回撥。
重新賦值
methods: { onTrigger: function(type) { // 重新賦值觸發變化 this.counter = { ...this.counter, [type]: this.counter[type] + 1, }; } }, watch: { counter: function(newV, oldV) { // 不會被觸發 console.log('counter change to %o from %o', newV, oldV); }, }
那兩種方式優劣如何呢?使用deep引數會為資料每一層都新增監聽,當層級較深時比較耗費效能,而且Vue不能監聽到屬性的新增或刪除。所以一般來說使用重新賦值的方式是較優的方案,但如果只是想監聽內部巢狀資料的話,重新賦值就比較重了,所以Vue也提供了直接監聽巢狀屬性變化的途徑:
通過路徑監聽內部資料
watch: { 'counter.up': function(newV, oldV) { console.log('counter.up change to %d from %d', newV, oldV); }, 'counter.down': function(newV, oldV) { console.log('counter.down change to %d from %d', newV, oldV); }, }
通過這種方式可以避免使用deep造成的效能消耗問題,當只對某內部屬性變化作出響應的場景下比較合適,但仍要注意監聽的路徑資料仍是複雜資料時的場景。
使用watch監聽變化時,給變數初始值不會觸發監聽函數,如果像要改變這個預設設定可以使用immediate引數,其用法和deep類似:
watch: { counter: { handler: function(newV, oldV) { console.log('counter change to %o from %o', newV, oldV); }, immediate: true, } }
這樣在賦初值時就會觸發監聽函數,其中第一個引數為初始值,第二個引數為undefined。
總結:使用watch可以監聽屬性的變化,且其使用方式也不少,理解每種方式的使用場景能為開發節省時間,優化效能。
以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45