• computed: 計(jì)算屬性將基于它們的響應(yīng)依賴關(guān)系緩存,本質(zhì)上是為了簡化模版中的邏輯

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"

<div>{{fullName}} {{fullName}} </div>

模版引用兩次，但是只會執(zhí)行一次運(yùn)算,只有當(dāng)firstName和secondName變化時才會重新計(jì)算； 如果是普通函數(shù)就會執(zhí)行兩次運(yùn)算

支持調(diào)試Computed,僅開發(fā)模式生效：

const plusOne = computed(() => count.value + 1, {
  onTrack(e) {
    // 當(dāng) count.value 作為依賴被追蹤時觸發(fā)
    debugger
  },
  onTrigger(e) {
    // 當(dāng) count.value 被修改時觸發(fā)
    debugger
  }
})
// 訪問 plusOne，應(yīng)該觸發(fā) onTrack
console.log(plusOne.value)
// 修改 count.value，應(yīng)該觸發(fā) onTrigger
count.value++

• watch: 監(jiān)聽屬性用于監(jiān)聽屬性的變化，監(jiān)聽屬性范圍更廣，當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的
  1.監(jiān)聽單一源

// 偵聽一個 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* 執(zhí)行異步或者開銷較大的操作，比如獲取發(fā)起后端請求*/
  }
)
// 直接偵聽一個 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

2.監(jiān)聽多個源

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

3.嘗試檢查深度嵌套對象或數(shù)組中的 property 變化時，仍然需要 deep 選項(xiàng)設(shè)置為 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} 代表立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)

• watchEffect 是vue3新特性，立即執(zhí)行傳入的一個函數(shù)，同時響應(yīng)式追蹤其依賴，并在其依賴變更時重新運(yùn)行該函數(shù)，函數(shù)用到哪個屬性就監(jiān)聽哪個屬性

const count = ref(0)

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

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

1.computed注重返回結(jié)果，watch和watchEffect注重過程不需要返回值
2.watch和watchEffect 支持異步調(diào)用 computed不支持
3.watch 可以訪問監(jiān)聽屬性的先前值和當(dāng)前值，而watchEffect只能訪問到當(dāng)前值
4.watchEffect函數(shù)支持取消異步api的請求和停止監(jiān)聽