vue2.x版本中computed和watch的使用入門詳解-computed篇

程式猿布歐發表於2022-03-23

前言

在基於vue框架的前端專案開發過程中，只要涉及到稍微複雜一點的業務，我們都會用到computed計算屬性這個鉤子函式，可以用於一些狀態的結合處理和快取的操作。

基礎使用

在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方法，可以獲取修改後的依賴值，在修改之後一併展示到頁面上或者進行其他業務需要的處理