可写计算属性
计算属性默认是只读的,但在特殊场景下,我们可以创建"可写"的计算属性,通过同时提供getter和setter实现:
<script setup>import { ref, computed } from 'vue'const firstName = ref('John')const lastName = ref('Doe')const fullName = computed({// getter:用于计算并返回属性值get() {return firstName.value + ' ' + lastName.value},// setter:用于处理属性值被修改的情况set(newValue) {// 将新值分解为 firstName 和 lastName[firstName.value, lastName.value] = newValue.split(' ')}})</script>
使用方式: 当执行fullName.value = 'Alice Smith'
时,setter会被调用,firstName
和lastName
会自动更新为’Alice’和’Smith’。
获取上一个值(Vue 3.4+)
Vue 3.4及以上版本支持通过getter的第一个参数获取计算属性的上一个值: