Vue3 计算属性 computed

什么是Vue3的计算属性：

computed属性是Vue3中的一个响应式计算属性，它可以根据其他响应式数据的变化而自动更新其自身的值。computed属性可以接收一个计算函数，并在计算函数中使用其他响应式数据的值进行计算。当任何一个参与计算的响应式数据发生变化时，computed属性会自动重新计算其值，并触发相应的依赖更新。

vue3 中如何创建计算属性：比如定义一个fullName的计算属性

	let fullName = computed({//这里面是计算get() {return firstName.value + '-' + lastName.value},//当按钮触发后，set方法自动触发，此时val参数就是Ya-miset(val) {const [str1, str2] = val.split('-')firstName.value = str1lastName.value = str2}})

 在计算 属性中包含一个get 和set 方法

如何使用比如在页面上定义两个输入框，然后绑定两个双向响应的值，如下：

<template>名字：<input v-model='firstName' />姓名：<input v-model='lastName' /><h1>{{fullName}}</h1><button v-on:click="setFullName()">修改值</button>
</template>
<script>
import { computed, ref } from 'vue'let firstName=ref("1");//定义响应式数据let lastName=ref("2");//定义响应式数据
</script>

在computed 中有一个get 方法，该方法的作用是获取fullName，当两个响应的值发生改变的时候对应的fullName就是发生改变

任何一个参与计算的响应式数据发生变化时，computed属性会自动重新计算其值，并触发相应的依赖更新

除了上述改变方式之外，还是可以通过其他的方式改变：

当页面上点击按钮的时候，也会执行该方法：那么fullName的值也会发生改变

 function setFullName(){fullName.value='Kimi-less'}

上面就是我对computed属性的理解，希望对你有所帮助！