computed，watch，watchEffect

computed

import { computed, ref } from "vue";

const firstName = ref("");
const lastName = ref("");

const name = computed(() => firstName.value + lastName.value);
// name.value = 'list' // 只读，不可修改
const name1 = computed(
  {
    get() {
      return firstName.value + lastName.value;
    },
    set(value) {
      firstName.value = firstName.value + value;
    },
  },
  {
    onTrack(e) {
      debugger; //调式
    },
    onTrigger(e) {
      debugger; //调式
    },
  }
);
name1.value = "你好，";

watch与watchEffect

import  reactive, ref, watch, watchEffect } from "vue";

const message = ref("");
const message2 = ref("");
watch(message, (newVal, oldValue) => {
  //.....
});
watch([message, message2], (newVal, oldValue) => {
  //newVal = []
  //olValue = []
});
const obj = reactive({ name: "", age: 18 });
watch(obj, () => {}, { deep: true, immediate: true });
watch(
  () => obj.age,
  () => {}
);

const stop = watchEffect(
  (onCleanup) => {
    // 默认第一次执行
    console.log("message", message.value);
    console.log("message2", message2.value);
    onCleanup(() => {
      //.. 在监听之前执行， 不会默认第一次执行
    });
  },
  {
    flush: "post", // 在dom渲染后执行, post, pre, sync
    onTrack() {}, // 调试
    onTrigger() {}, // 调试
  }
);
stop(); // 停止监听