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!

推薦閱讀: