vue3:computed

白墨阳2024-11-16 10:29

原文： 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>