vue2.x版computed和watch怎么使用

今天小編給大家分享一下vue2.x版computed和watch怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

基礎(chǔ)使用

在computed中，聲明一個(gè)函數(shù)，并需要提供一個(gè)返回值，用于在頁面展示或者結(jié)合其他方法進(jìn)行處理

結(jié)合state狀態(tài)使用

通過changeName返回一段依賴于name的字符串

<li>computed基本使用</li>
<li>name值：{{ name }}</li>
<li>{{ changeName }}</li>
data() {
		return {
			name: "zhangsan",
		};
	},
computed: {
	changeName: function () {
		return `一段依賴于name：${this.name}的文字`;
	},
},

使用其他組件狀態(tài)

主動(dòng)觸發(fā)computed方法，對(duì)比不依賴于其他狀態(tài)下的區(qū)別，通過點(diǎn)擊事件，主動(dòng)觸發(fā)一些操作

<li>{{ isCache }}</li>
<li>{{ cacheTip }}</li>
<li>{{ changeCache }}</li>
<li><button @click="handleChange">修改文字</button></li>
data() {
	return {
		cacheTip: "cacheTip原始值",
	};
},
computed: {
	isCache: function () {
		return `不依賴于任何屬性值的一段文字`;
	},
	changeCache: function () {
		return `依賴于cacheTip，${this.cacheTip}`;
	},
},
methods: {
	handleChange() {
		this.cacheTip = "cacheTip狀態(tài)被修改";
	},
},

當(dāng)我們點(diǎn)擊修改狀態(tài)時(shí)，可以看到，cacheTip被修改只會(huì)，依賴于cacheTip的changeCache也會(huì)發(fā)生改變
isCache因?yàn)椴缓推渌麪顟B(tài)關(guān)聯(lián)，所以還是保持原來的值不變

getter VS setter

上面的cacheTip，或者isCache，在computed的通用方法中，默認(rèn)都是使用了getter方法去獲取處理過的值

可以寫成：

isCache: {
    setter:function () {
    	return `不依賴于任何屬性值的一段文字`;
    }
}

通過getter和setter，可以進(jìn)一步對(duì)需要處理的狀態(tài)進(jìn)行處理

<li>{{ firstName }}</li>
<li>{{ lastName }}</li>
<li>{{ setterGetter }}</li>
<li><button @click="handleChangeFirst">修改文字</button></li>
data() {
	return {
		firstName: "lewyon001",
		lastName: "布?xì)W001",
	};
},
computed: {
    setterGetter: {
    	// getter
    	get: function (newValue) {
    		console.log("newValue", newValue);
    		return this.firstName + " " + this.lastName;
    	},
    	// setter
    	set: function (newValue) {
    		console.log("newValue", newValue);
    		this.firstName = `${newValue.firstName}`;
    		this.lastName = `${newValue.lastName}`;
    	},
    },
}

methods: {
	handleChangeFirst() {
		this.setterGetter = { firstName: "lewyon", lastName: "布?xì)W" };
	},
},

• get屬性可以獲取最原始的依賴值并處理，

• set方法，可以獲取修改后的依賴值，在修改之后一并展示到頁面上或者進(jìn)行其他業(yè)務(wù)需要的處理

computed方法的基礎(chǔ)，包括進(jìn)階的操作，以及setter和getter方法如上

使用建議：

作為經(jīng)常使用的方法：

• computed可以作為依賴于其他狀態(tài)的緩存進(jìn)行使用，包括一些不經(jīng)常更新的內(nèi)容，減少開銷

• 簡(jiǎn)單的字符串模板結(jié)合其他狀態(tài)

• 還有其他的場(chǎng)景在開發(fā)中，我們都可以進(jìn)行使用，結(jié)合watch等。

以上就是“vue2.x版computed和watch怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。