快捷導(dǎo)航

vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別

更新時(shí)間：2022年07月01日 17:04:40 作者：程序員布?xì)W

這篇文章主要介紹了vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，需要的小伙伴可以參考一下

前言

前面篇介紹了computed和watch的基本使用vue2.x版詳解computed和watch的使用

兩者的區(qū)別，繼續(xù)通過(guò)代碼實(shí)現(xiàn)的方式具體去了解

html

<li>最開(kāi)始的value值：{{ name }}</li>
<li>computed計(jì)算后的值：{{ 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下所有的狀態(tài)都會(huì)監(jiān)聽(tīng)this.name---->", this.name);
		console.log(
			"watch下所有的狀態(tài)都會(huì)監(jiān)聽(tīng)this.computedName---->",
			this.computedName
		);
		this.watchName = newVal;
	},
},
computed: {
	computedName: function (currentThis) {
		console.log(
			"和計(jì)算屬性無(wú)關(guān)的狀態(tài)發(fā)生更改時(shí),不會(huì)執(zhí)行，只要依賴(lài)的狀態(tài)發(fā)生更改，緩存才會(huì)更新",
			currentThis
		);
		return `依賴(lài)于name，：${this.name}`;
	},
},
methods: {
	handleNumber() {
		this.name = "lisi";
	},
},

區(qū)別

依賴(lài)值： computed依賴(lài)于所使用的狀態(tài)，類(lèi)似在data中聲明的name,
而watch中監(jiān)聽(tīng)的值不依賴(lài)于某個(gè)值，只要組件狀態(tài)發(fā)生更改，監(jiān)聽(tīng)的值就實(shí)時(shí)獲取最新值,
computed的實(shí)現(xiàn)使用的是getter和setter獲取值，屬于同步操作。

使用方法：

computed最后需要進(jìn)行return處理返回值，并且可以使用更深層次的getter和setter，具體參考 vue2.x版詳解computed和watch的使用
watch除了callback回調(diào)函數(shù)外，還有兩個(gè)屬性值為布爾值的屬性，用于首次綁定immediate，以及對(duì)對(duì)象的深度監(jiān)聽(tīng)deep
兩者相同點(diǎn)就是可以通過(guò)方法參數(shù)獲取新值，結(jié)合其他狀態(tài)處理相關(guān)的業(yè)務(wù)

補(bǔ)充

在官方文檔中，除了在組件中使用的watch外，官方文檔中，還有對(duì)于示例中watch的介紹

具體用法可以在官網(wǎng)中：

https://cn.vuejs.org/v2/api/#vm-watch

$watch基礎(chǔ)使用–來(lái)自官方文檔例子

官方文檔提示：

注意：在變更 (不是替換) 對(duì)象或數(shù)組時(shí)，舊值將與新值相同，因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組。Vue 不會(huì)保留變更之前值的副本。

vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做點(diǎn)什么
})
// 函數(shù)
vm.$watch(
  function () {
    // 表達(dá)式 `this.a + this.b` 每次得出一個(gè)不同的結(jié)果時(shí)
    // 處理函數(shù)都會(huì)被調(diào)用。
    // 這就像監(jiān)聽(tīng)一個(gè)未被定義的計(jì)算屬性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做點(diǎn)什么
  }
)

需要注意的是，如果使用vm.$watch，那么使用unwatch有助于我們?nèi)∠麑?duì)某個(gè)狀態(tài)的監(jiān)聽(tīng)，減少不必要的監(jiān)聽(tīng)和交互開(kāi)銷(xiāo)

var unwatch = vm.$watch('a', cb)
// 之后取消觀察
unwatch()

結(jié)語(yǔ)

花了兩個(gè)篇幅去介紹watch和computed的使用方法，以及這兩個(gè)鉤子函數(shù)的區(qū)別，在實(shí)際的企業(yè)項(xiàng)目開(kāi)發(fā)中，使用的場(chǎng)景和次數(shù)較多，所以盡量寫(xiě)的稍微詳細(xì)一些，同時(shí)也將筆記的代碼放在了開(kāi)源倉(cāng)庫(kù)，希望對(duì)大家在開(kāi)發(fā)vue2.x的項(xiàng)目中有所幫助

到此這篇關(guān)于vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別的文章就介紹到這了,更多相關(guān)vue2.x computed與watch 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: