vue2.x版本中computed和watch的使用及關聯和區別
前言
前面篇介紹瞭computed和watch的基本使用vue2.x版詳解computed和watch的使用
兩者的區別,繼續通過代碼實現的方式具體去瞭解
html
<li>最開始的value值:{{ name }}</li> <li>computed計算後的值:{{ computedName }}</li> <li> watch修改後的值:{{ watchName }} <input type="text" v-model="watchName" /> </li> <li><button @click="handleNumber">修改名字</button></li>
JS
data() { return { name: "zhangsan", watchName: "張三", }; }, watch: { watchName(newVal, oldVal) { console.log("舊的值---->", newVal); console.log("新的值---->", oldVal); console.log("watch下所有的狀態都會監聽this.name---->", this.name); console.log( "watch下所有的狀態都會監聽this.computedName---->", this.computedName ); this.watchName = newVal; }, }, computed: { computedName: function (currentThis) { console.log( "和計算屬性無關的狀態發生更改時,不會執行,隻要依賴的狀態發生更改,緩存才會更新", currentThis ); return `依賴於name,:${this.name}`; }, }, methods: { handleNumber() { this.name = "lisi"; }, },
區別
依賴值: computed依賴於所使用的狀態,類似在data中聲明的name,
而watch中監聽的值不依賴於某個值,隻要組件狀態發生更改,監聽的值就實時獲取最新值,
computed的實現使用的是getter和setter獲取值,屬於同步操作。
使用方法:
- computed最後需要進行return處理返回值,並且可以使用更深層次的getter和setter,具體參考 vue2.x版詳解computed和watch的使用
- watch除瞭callback回調函數外,還有兩個屬性值為佈爾值的屬性,用於首次綁定immediate,以及對對象的深度監聽deep
- 兩者相同點就是可以通過方法參數獲取新值,結合其他狀態處理相關的業務
補充
在官方文檔中,除瞭在組件中使用的watch外,官方文檔中,還有對於示例中watch的介紹
具體用法可以在官網中:
https://cn.vuejs.org/v2/api/#vm-watch
$watch基礎使用–來自官方文檔例子
官方文檔提示:
註意:在變更 (不是替換) 對象或數組時,舊值將與新值相同,因為它們的引用指向同一個對象/數組。Vue 不會保留變更之前值的副本。
vm.$watch('a.b.c', function (newVal, oldVal) { // 做點什麼 }) // 函數 vm.$watch( function () { // 表達式 `this.a + this.b` 每次得出一個不同的結果時 // 處理函數都會被調用。 // 這就像監聽一個未被定義的計算屬性 return this.a + this.b }, function (newVal, oldVal) { // 做點什麼 } )
需要註意的是,如果使用vm.$watch,那麼使用unwatch有助於我們取消對某個狀態的監聽,減少不必要的監聽和交互開銷
var unwatch = vm.$watch('a', cb) // 之後取消觀察 unwatch()
結語
花瞭兩個篇幅去介紹watch和computed的使用方法,以及這兩個鉤子函數的區別,在實際的企業項目開發中,使用的場景和次數較多,所以盡量寫的稍微詳細一些,同時也將筆記的代碼放在瞭開源倉庫,希望對大傢在開發vue2.x的項目中有所幫助
到此這篇關於vue2.x版本中computed和watch的使用及關聯和區別的文章就介紹到這瞭,更多相關vue2.x computed與watch 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue2.x版詳解computed和watch的使用
- 解讀Vue實例的屬性及模板渲染
- 如何理解Vue中computed和watch的區別
- vue Watch和Computed的使用總結
- Vue計算屬性與監視(偵聽)屬性的使用深度學習