Vue之computed(計算屬性)詳解get()、set()

Vue的計算屬性：

get 獲取屬性值 ，set監聽屬性值的變化

• 1.在computed屬性物件中定義計算屬性的方法，在頁面中使用{{方法名}}來顯示計算的結果。

• 2.通過getter\setter實現對屬性資料的顯示和監視，計算屬性存在快取，多次讀取只執行一次getter計算。

<div id="demo">
		姓：<input type="text" placeholder="firstName" v-model="firstName"><br>
		名：<input type="text" placeholder="lastName" v-model="lastName"><br>
		姓名1(單向):<input type="text" placeholder="FullName1" v-model="fullName1"><br>
		姓名2(雙向):<input type="text" placeholder="FullName2" v-model="fullName2"><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const demo = new Vue({
		el : '#demo',
		data : {
			firstName : 'A',
			lastName : 'B',
			fullName2 : 'A B'
		},
		computed : {//計算屬性相當於data裡的屬性
			//什麼時候執行：初始化顯示/ 相關的data屬性發生變化
			fullName1(){//計算屬性中的get方法，方法的返回值就是屬性值
				return this.firstName + ' ' + this.lastName
			},
 
			fullName3 : {
				get(){//回撥函式 當需要讀取當前屬性值是執行，根據相關資料計算並返回當前屬性的值
					return this.firstName + ' ' + this.lastName
				},
				set(val){//監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性資料
					//val就是fullName3的最新屬性值
					console.log(val)
					const names = val.split(' ');
					console.log(names)
					this.firstName = names[0];
					this.lastName = names[1];
				}
			}
		}
 
	})
 
複製程式碼

原文：blog.csdn.net/Hanhanyoona…