computed、watch和watchEffect区别

• computed: 计算属性将基于它们的响应依赖关系缓存,本质上是为了简化模版中的逻辑

const firstName = ref("Mir");
const secondName=  ref("joy");
const fullName = computed(()=> firstName.value +" "+secondName.value)

支持set方法：

 let fullName = computed({
      get: () => firstName.value +" "+secondName.value,
      set: val => {
        console.log("...")
        firstName.value = val.split(" ")[0];
        secondName.value = val.split(" ")[1];
      }
    });
fullName.value = "hong xingshi"

{{fullName}} {{fullName}} 

模版引用两次，但是只会执行一次运算,只有当firstName和secondName变化时才会重新计算； 如果是普通函数就会执行两次运算

支持调试Computed,仅开发模式生效：

const plusOne = computed(() => count.value + 1, {
  onTrack(e) {
    // 当 count.value 作为依赖被追踪时触发
    debugger
  },
  onTrigger(e) {
    // 当 count.value 被修改时触发
    debugger
  }
})
// 访问 plusOne，应该触发 onTrack
console.log(plusOne.value)
// 修改 count.value，应该触发 onTrigger
count.value++

• watch: 监听属性用于监听属性的变化，监听属性范围更广，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
  1.监听单一源

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* 执行异步或者开销较大的操作，比如获取发起后端请求*/
  }
)
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

2.监听多个源

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

3.尝试检查深度嵌套对象或数组中的 property 变化时，仍然需要 deep 选项设置为 true

const state = reactive({ 
  id: 1,
  attributes: { 
    name: '',
  }
})

watch(
  () => state,
  (state, prevState) => {
    console.log('not deep', state.attributes.name, prevState.attributes.name)
  }
)

watch(
  () => state,
  (state, prevState) => {
    console.log('deep', state.attributes.name, prevState.attributes.name)
  },
  { deep: true }
)

state.attributes.name = 'Alex' // 日志: "deep" "Alex" "Alex"
//{ immediate: true} 代表立即以表达式的当前值触发回调

• watchEffect 是vue3新特性，立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数，函数用到哪个属性就监听哪个属性

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

1.computed注重返回结果，watch和watchEffect注重过程不需要返回值
2.watch和watchEffect 支持异步调用 computed不支持
3.watch 可以访问监听属性的先前值和当前值，而watchEffect只能访问到当前值
4.watchEffect函数支持取消异步api的请求和停止监听