一、說明
- 在
computed中，可以定義一些屬性，即計算屬性。 - 計算屬性本質是方法，只是在使用這些計算屬性的時候，把他們的名稱直接當作屬性來使用，並不會把計算屬性當作方法去調用，不需要加小括號
()調用。 - 此計算屬性的方法內部所用到的任何
data中的數據，依賴響應屬性只要發生改變，就會立即重新計算，即觸發這個計算屬性的重新求值；否則不會重新計算求值。 - 計算屬性的求值結果會被緩存起來，方便下次直接使用（多次調用只要內部數據不改變就不會重新求值，改變了也只會計算一次，雖然有多個地方引用此屬性）。
- 方法內部無論如何都要return出去一個值。
二、實例
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fullName">>
<p>{{fullName}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: '',
lastName: '',
},
methods: {
},
computed: {
fullName() {
console.log('求值');
return `${this.firstName}-${this.lastName}`;
}
}
});
</script>
</body>
</html>
作者：小丘啦啦啦
鏈接：https://www.jianshu.com/p/bb74c5fba3ad
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。