Vue3 computed的使用

Vue3 computed的使用

Vue3 computed的使用

<template>
  <div>
    {{ text }}
    <button @click="add">点击</button>
  </div>
</template>

<script>
import { ref, computed } from "vue";
export default {
  setup(props, { attrs, slots, emit }) {
    let NameOne = ref("徐");
    let NameTwo = ref("涛");
    /* 用法 一 */
    // let text = computed(() => {
    //   return NameOne.value + NameTwo.value;
    // });

    /* 用法 二 */
    let text = computed({
      get(value) {
        return NameOne.value + NameTwo.value;
      },
      set(newvalue) {
        NameOne.value = "1";
        NameTwo.value = "2";
      },
    });
    const add = () => {
      text.value = "222222";
    };
    return {
      text,
      add,
    };
  },
};
</script>