VUE 中常用的雙向綁定是通過監聽 data 中的變量來實現的,當 data 中的數據發生變化時,頁面也會相應地更新,這給前端開發帶來了非常大的便利,大大簡化了前端開發的難度。然而,在實際開發中,我們也會遇到不需要監聽 data 中的數據變化才進行更新的場景,該怎么辦呢?
首先我們需要知道,VUE 沒有必要監聽所有的 data 變化。當數據變化時,如果頁面中并沒有使用到該數據,那么這個數據變化實際上是沒有任何意義的,VUE 在這種情況下并不需要監聽該變化。
// 沒有使用到的數據 data () { return { message: 'Hello Vue!' } } // 沒有使用到的數據 computed: { reverseMessage() { return this.message.split('').reverse().join('') } }
在上面的代碼中,message 未被使用,而 reverseMessage 所依賴的 message 中的數據變化了,但頁面卻沒有相應的更新,這是因為 VUE 并不需要監聽所有的 data 變化。
除此之外,還有一種情況,當我們修改 data 中的數據時,我們并不需要頁面中的所有組件都需要更新,而是只有某些組件需要更新。如果 VUE 監聽了所有的 data 變化,那么這種情況下就會增加很多不必要的開銷,導致頁面性能下降。
當我們在開發中遇到這種情況,可以通過使用 $forceUpdate 方法來進行手動的頁面更新,而不必再通過監聽 data 的變化來觸發頁面更新。
mounted () { setInterval(()=>{ this.$forceUpdate(); }, 1000); }
上面的代碼中,$forceUpdate 方法可以強制組件重新渲染一次,從而達到更新頁面的效果。
最后提醒大家,VUE 中監聽 data 的變化并不是一定要做的事情,這取決于我們的實際需求。如果我們需要在數據變化時更新頁面,那么我們可以讓 VUE 監聽 data 的變化,否則我們可以手動觸發頁面更新,從而減少不必要的開銷。
下一篇vue不綁定頁面