vue3 Composition API（二）：computed，watchEffect，watch

computed

---

01_computed的使用.vue

<template>
  <div>
    <h2>{
  { fullName }}</h2>
    <button @click="changeName">修改firstName</button>
  </div>
</template>

<script>
  import {
      ref, computed } from "vue";

  export default {
     
    setup() {
     
      const firstName = ref("Kobe");
      const lastName = ref("Bryant");

      // 1.用法一: 传入一个getter函数
      // computed的返回值是一个ref对象
      const fullName = computed(() => firstName.value + " " + lastName.value);

      // 2.用法二: 传入一个对象, 对象包含getter/setter
      const fullName = computed({
     
        get: () => firstName.value + " " + lastName.value,
        set(newValue) {
     
          const names = newValue.split(" ");
          firstName.value = names[0];
          lastName.value = names[1];
          // [firstName.value, lastName.value] = names
        },
      });

      const changeName = () => {
     
        // firstName.value = "James"
        fullName.value = "haha xixi";
      };

      return {
     
        fullName,
        changeName,
      };
    },
  };
</script>

<style scoped></style>

---

侦听数据的变化

---

watchEffect

---

02_watchEffect基本使用.vue

<template>
  <div>
    <h2>{
  { name }}-{
  { age }}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
  import {
      ref, watchEffect } from "vue";

  export default {
     
    setup() {
     
      // watchEffect: 自动收集响应式的依赖
      const name = ref("why");
      const age = ref(18);

      const changeName = () => (name.value = "kobe");
      const