vue3 Computed中get 和set

vue3 computed中get和set

1.get

vue3中计算属性的函数中如果只传入一个回调函数，表示的是get

<template>
  <div class="main">
    <div>
      <input type="text" v-model="userName.oneName" />
      <input type="text" v-model="userName.twoName" />
    </div>
    <h1>计算属性</h1>
    <div>
      <input type="text" v-model="changeOneName" />
    </div>
  </div>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    const userName = reactive({
      oneName: "张荣寒",
      twoName: "李月",
    });
    // vue3中计算属性的函数中如果只传入一个回调函数，表示的是get
    const changeOneName = computed(() => {
      return userName.oneName + "我是get";
    });
    return {
      userName,
      changeOneName,
    };
  },
};
</script>

2.set

vue3中计算属性的函数中如果传入一个对象，表示的是get和set

<template>
  <div class="main">
    <div>
      <input type="text" v-model="userName.twoName" />
    </div>
    <h1>计算属性</h1>
    <div>
      <input type="text" v-model="changeTwoName" />
    </div>
  </div>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    const userName = reactive({
      twoName: "李月",
    });

    // vue3中计算属性的函数中如果传入一个对象，表示的是get和set
    const changeTwoName = computed({
      get() {
        return userName.twoName;
      },
      set(val) {
        console.log(val);
        let name = val.split("_");
        userName.twoName = name;
      },
    });
    return {
      userName,
      changeTwoName,
    };
  },
};
</script>