vue3:computed

扫码或者点击文字后台提问

原文： https://mp.weixin.qq.com/s/36dd--oj6jmkZblfJRh4iw

 

computed 支持选项式写法 和 函数式写法

1.选项式写法 支持一个对象传入get函数以及set函数自定义操作

 2.函数式写法 只能支持一个getter函数不允许修改值的

<template><div><div>姓：<input type="text" v-model="firstName"></div><div>名：<input type="text" v-model="lastName"></div><div>全名：{{ name }}</div><div><button @click="changeName">修改</button></div></div>
</template>
<script setup lang='ts'>
import { ref, computed } from 'vue';
/*** computed 支持选项式写法 和 函数式写法* 1.选项式写法 支持一个对象传入get函数以及set函数自定义操作* 2.函数式写法 只能支持一个getter函数不允许修改值的*/
let firstName=ref('张');
let lastName=ref('三');// //1.选项式写法 支持一个对象传入get函数以及set函数自定义操作
// let name=computed<string>({
//   get () {
//     // 读取值操作
//     return firstName.value + '-' + lastName.value
//   },
//   set (newVal) {
//     // 设置值操作
//     [firstName.value,lastName.value] = newVal.split('-')//   }
// });
// const changeName = () => {
//   name.value = '小-田'
// }//2.函数式写法 只能支持一个getter函数不允许修改值的
let name = computed(() => firstName.value + '-' + lastName.value)
</script>
<style scoped>
</style>