八、计算属性与监视

（一）computed 函数

• 与 Vue2.x 中 computed 配置功能一致

import { computed } from 'vue';
setup() {
  ...

  // 计算属性——简写【没有考虑计算属性被修改的情况】
  person.fullName = computed(() => {
    return person.firstName + "-" + person.lastName;
  });

  // 计算属性——完整写法【考虑计算属性读和写的情况】
  person.fullName = computed({
    get() {
      return person.firstName + "-" + person.lastName;
    },
    set(val) {
      const nameArr = val.split("-");
      person.firstName = nameArr[0];
      person.lastName = nameArr[1];
    },
  });
}

（二）watch 函数

• 与 Vue2.x 中 watch 配置功能一致

1.两个小“坑”

1）监视 reactive 定义的响应式数据时

• oldValue 无法正确获取
• 强制开启了深度监视（deep 配置失效）

2）监视 reactive 定义的响应式数据中某个属性（对象类型）时

• deep 配置有效

2.情况一：监视 ref 定义的响应式数据

watch(
  sum,
  (newValue, oldValue) => {
    console.log("sum变了", newValue, oldValue);
  },
  { immediate: true },
);

3.情况二：监视多个 ref 定义的响应式数据

watch(
  [sum, msg],
  (newValue, oldValue) => {
    console.log("sum或msg变了", newValue, oldValue);
  },
  { immediate: true },
);

4.情况三：监视 reactive 定义的响应式数据

• 无法正确获得 oldValue
• 强制开启了深度监视

watch(
  person,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },
  { immediate: true, deep: false }, // 此处的deep配置不再奏效
);

5.情况四：监视 reactive 定义的响应式数据中的某个属性

watch(
  () => person.age,
  (newValue, oldValue) => {
    console.log("person的age变化了", newValue, oldValue);
  },
);

• 特殊：该属性是一个对象类型，deep 配置有效，且必须开启深度监视

watch(
  () => person.job,
  (newValue, oldValue) => {
    console.log("person的job变化了", newValue, oldValue);
  },
  { immediate: true, deep: true },
);

6.情况五：监视 reactive 定义的响应式数据中的某些属性

watch([() => person.name, () => person.age], (newValue, oldValue) => {
  console.log("person的name或age变化了", newValue, oldValue);
});

（三）watchEffect 函数

1.watch

• 既要指明监视的属性
• 也要指明监视的回调

2.watchEffect

• 不用指明监视哪个属性
• 监视的回调中用到哪个属性就监视哪个属性

3.watchEffect 有点类似 computed

• computed 注重的是计算出来的值（回调函数的返回值）
  • 所以必须写返回值
• watchEffect 更注重的是过程（回调函数的函数体）
  • 所以不用写返回值

// watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect(() => {
  const x1 = sum.value;
  const x2 = person.value;
  console.log("watchEffect配置的回调执行了");
});