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, synconTrack() {}, // 调试onTrigger() {}, // 调试}
);
stop(); // 停止监听
