Vue3 computed 用法与场景

// App.vue 

<template>

  <div>

    <home></home>

  </div>

</template>

<script>

import Home from "./Home.vue";

export default {

  components: {

    Home,

  },

};

</script>

<style scoped>

</style>

// Home.vue

<template>

  <div>

    <!-- -->

    <h2>firstName:{{ firstName }}</h2>

    <h2>lastName:{{ lastName }}</h2>

    <h2>fullName:{{ fullName }}</h2>

    <button @click="changeName">修改fullName</button>

  </div>

</template>

<script>

import { ref } from "vue";

export default {

  setup() {

    const firstName = ref("Nico");

    const lastName = ref("Niconi");

    const fullName = firstName.value + " " + lastName.value;

    const changeName = () => {

      // 可以得出 fullName 不是响应式的

      lastName.value = "aimer"; // 改变 lastName 为 aimer 打印结果也并没有发生改变

      console.log("fullName：", fullName);

    };

    return {

      fullName,

      lastName,

      firstName,

      changeName,

    };

  },

};

</script>

<style scoped>

</style>

// Home.vue

<template>

  <div>

    <!-- -->

    <h2>firstName:{{ firstName }}</h2>

    <h2>lastName:{{ lastName }}</h2>

    <h2>fullName:{{ fullName }}</h2>

    <button @click="changeName">修改fullName</button>

  </div>

</template>

<script>

import { ref, computed } from "vue";

export default {

  setup() {

    const firstName = ref("Nico");

    const lastName = ref("Niconi");

    const fullName = computed(() => firstName.value + " " + lastName.value);

    const changeName = () => {

      // 使用 computed 里面可以写成一个函数，再 return 出结果 则是响应式的！

      lastName.value = "aimer"; // 改变 lastName 为 aimer 打印结果也已经发生了改变

      console.log("fullName：", fullName);

    };

    return {

      fullName,

      lastName,

      firstName,

      changeName,

    };

  },

};

</script>

<style scoped>

</style>

// Home.vue

<template>

  <div>

    <!-- -->

    <h2>firstName:{{ firstName }}</h2>

    <h2>lastName:{{ lastName }}</h2>

    <h2>fullName:{{ fullName }}</h2>

    <button @click="changeName">修改fullName</button>

  </div>

</template>

<script>

import { ref, computed } from "vue";

export default {

  setup() {

    const firstName = ref("Nico");

    const lastName = ref("Niconi");

    console.log("原数据:", firstName.value + " " + lastName.value);

    const fullName = computed({

      get: () => firstName.value + " " + lastName.value,

      set: (newValue) => {

        // 通过下面打印，也能拿到 下面修改的值 newValue = Nekoaimer

        console.log("newValue：", newValue);

        // 因此可以进行一些操作 下面举个栗子:

        firstName.value = newValue.split(" ")[0];

        lastName.value = newValue.split(" ")[1];

      },

    });

    const changeName = () => {

      // 返回的 fullName 依然是一个 ref 对象， 所以修改 fullName 依然是使用 value

      fullName.value = "Neko aimer"; // 改变 fullName 值为 Nekoaimer

      console.log("fullName：", fullName);

    };

    return {

      fullName,

      lastName,

      firstName,

      changeName,

    };

  },

};

</script>

<style scoped>

</style>