vue2.x版computed和watch怎么使用

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

基礎使用

在computed中，聲明一個函數，并需要提供一個返回值，用于在頁面展示或者結合其他方法進行處理

結合state狀態使用

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

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

使用其他組件狀態

主動觸發computed方法，對比不依賴于其他狀態下的區別，通過點擊事件，主動觸發一些操作

<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狀態被修改";
	},
},

當我們點擊修改狀態時，可以看到，cacheTip被修改只會，依賴于cacheTip的changeCache也會發生改變
isCache因為不和其他狀態關聯，所以還是保持原來的值不變

getter VS setter

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

可以寫成：

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

通過getter和setter，可以進一步對需要處理的狀態進行處理

<li>{{ firstName }}</li>
<li>{{ lastName }}</li>
<li>{{ setterGetter }}</li>
<li><button @click="handleChangeFirst">修改文字</button></li>
data() {
	return {
		firstName: "lewyon001",
		lastName: "布歐001",
	};
},
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: "布歐" };
	},
},

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

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

computed方法的基礎，包括進階的操作，以及setter和getter方法如上

使用建議：

作為經常使用的方法：

• computed可以作為依賴于其他狀態的緩存進行使用，包括一些不經常更新的內容，減少開銷

• 簡單的字符串模板結合其他狀態

• 還有其他的場景在開發中，我們都可以進行使用，結合watch等。

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