您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue中watch監聽方法有哪些”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“vue中watch監聽方法有哪些”這篇文章吧。
比如有個對象:
watchData: { name: '', age: '', }
watchData: { handler: function() { console.log(); }, deep: true }
監聽對象可以用deep
,深度監測,不然監測不到對象的變化
方式一:
watch: { 'watchData.name'(newValue, oldValue) { console.log(newValue); } }
方式二:
watch: { 'watchData.name': { handler: function() { console.log(); } } },
為什么要監聽對象的屬性,監聽對象的話,一旦對象內部的任何數據變化,都會導致watch
重新執行,這樣的話可能不是你想要的監聽某一個屬性變化才執行watch
,或者是一旦說對象內部任何一個屬性變化就讓其watch
執行,也會對性能有一定性的損耗,所以我們用這種監聽對象單個屬性的方式來處理,給要監聽的“對象.屬性,用引號包裹起來”
computed: { getName() { return this.watchData.name } }, watch: { getName(newValue, oldValue) { console.log(newValue); } },
這種方式其實和第二種是一樣的,區別就是用到了computed
,然后再監聽方法getName
,實際上方法getName返回的就是watchData對象中的name
屬性
以上是“vue中watch監聽方法有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。