vue3-computed计算属性和reactive响应式系统结合使用

1.前言

        vue3中使用reactive函数创建一个响应式对象，当对象数据发生变化的时候，依赖这些数据的计算属性和模板会自动的更新。

2.实例

2.1 简写 

<template><div><p>用户名: {{ userName }}</p><p>用户名的大写形式: {{ upperCaseName }}</p><button @click="changeName">更改用户名</button></div>
</template><script>
import { reactive, computed } from 'vue';export default {name: 'UserComponent',setup() {// 使用reactive创建响应式对象const state = reactive({name: 'messi'});// 定义计算属性upperCaseName，根据state.name计算得到大写形式const upperCaseName = computed(() => state.name.toUpperCase());// 定义一个方法来更改用户名const changeName = () => {state.name = 'ronaldo';};// 返回需要在模板中使用的变量和方法return {userName: state.name,upperCaseName,changeName};}
};
</script><style scoped>
/* 样式部分可以根据需要添加 */
</style>

• reactive用于创建一个响应式的state对象，该对象包含一个name属性。

• computed用于定义一个计算属性upperCaseName，它的值是基于state.name计算得出的大写形式。

• 当state.name的值改变时，upperCaseName会自动更新，因为它是计算属性，会跟踪它的依赖并自动重新计算。

• changeName是一个方法，用于更改state.name的值。

• 这些变量和方法通过setup函数的返回对象暴露给模板，使得模板可以访问和使用它们

2.2 考虑读写 

 

<template><div><p>姓名: {{ fullName }}</p><p>年龄: {{ age }}</p><input v-model="firstName" placeholder="修改名"><input v-model="lastName" placeholder="修改姓"></div>
</template><script>
import { reactive, computed } from 'vue';export default {setup() {// 使用reactive创建响应式对象const state = reactive({firstName: 'messi',lastName: 'Lionel',age: 34,});// 定义计算属性，考虑读和写操作const fullName = computed({get: () => `${state.firstName} ${state.lastName}`,set: (newValue) => {[state.firstName, state.lastName] = newValue.split(' ');}});return {firstName: state.firstName,lastName: state.lastName,age: state.age,fullName,};},
};
</script><style scoped>div {padding: 20px;}input {margin-top: 10px;}
</style>

• reactive用于创建响应式对象state，它包含了组件的状态数据。

• computed定义了一个计算属性fullName，它既有get方法也有set方法。get方法返回firstName和lastName组成的完整名字；set方法允许你通过设置fullName来修改firstName和lastName。

• v-model指令用于在输入框和计算属性fullName之间创建双向绑定，这意味着当用户在输入框中输入内容时，fullName会自动更新，并且反过来，fullName的变化也会反映在输入框中。