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的变化也会反映在输入框中。