前言
computed計算屬性，與普通JS函數相比computed性能更好，以為它存在計算緩存，js函數沒有，其計算結果是只讀的，可通過set方法修改。
computed的基本用法
<body>
<div id="app">
<input v-model="firstName" type="number"/>
<input v-model="lastName" type="number"/>
<div>{{fullName}}</div>
</div>
</body>
<script>
const {createApp, ref, computed} = Vue;
const firstName = ref(1);
const lastName = ref(2);
const app = {
// 入口函數
setup() {
// 基礎用法
let fullName = computed(() => firstName.value + lastName.value)
// console.log(fullName ++) // error computed 是只讀的
return {
firstName,
lastName,
fullName
}
}
}
// 掛載(建立vue與dom的聯系)
createApp(app).mount('#app')
</script>
computed的set和get方法
<body>
<div id="app">
<input v-model="firstName" type="number"/>
<input v-model="lastName" type="number"/>
<div>{{fullNames}}</div>
</div>
</body>
<script>
const {createApp, ref, computed} = Vue;
const firstName = ref(1);
const lastName = ref(2);
const app = {
// 入口函數
setup() {
// get set 方法
const fullNames = computed({
get: () => firstName.value + lastName.value,
set: (val) => {
firstName.value = val
}
})
fullNames.value = 7 // set
return {
firstName,
lastName,
fullNames
}
}
}
// 掛載(建立vue與dom的聯系)
createApp(app).mount('#app')
</script>
