computed

• 與Vue2.x中computed配置功能一致
• 寫法

import {computed} from 'vue'setup(){...//計算屬性——簡寫let fullName = computed(()=>{return person.firstName + '-' + person.lastName})//計算屬性——完整let fullName = computed({get()return person.firstName + '-' + person.lastName},set(value){const nameArr = value.split('-')person.firstName = nameArr[0]person.lastName = nameArr[1]}})
}

watch

• 注意
  • 監視reactive定義的響應式數據時：oldValue無法正確獲取、強制開啟了深度監視（deep配置失效）。
  • 監視reactive定義的響應式數據中的某個屬性時：deep配置有效。

情況一：監視ref定義的響應式數據

• 監視ref定義的對象，改變某一個屬性時，newValue和oldValue是同一個值;
• 若改變整個對象newValue和oldValue不一樣;

	 watch(sum, (newValue, oldValue) => {console.log('sum變化了', newValue, oldValue)}, {immediate: true})

情況二：監視多個ref定義的響應式數據(寫成數組格式)

	watch([sum, msg], (newValue, oldValue) => {console.log('sum或msg變化了', newValue, oldValue)})

情況三：監視reactive定義的響應式數據,deep默認開啟，且關不掉

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

情況四：監視reactive定義的響應式數據中某個屬性

• 可以監視整體改變，也可以監視某個屬性改變
• 監視的屬性不是【對象類型】，需寫成函數
• 監視的屬性是【對象類型】，可直接編，也可使用函數，推薦使用函數并添加deep屬性
  （因為直接寫person，無法監聽到整個對象的改變;deep是為了深層監聽）

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

情況五：監視reactive定義的響應式數據中某些屬性

    watch([() => person.job, () => person.name], (newValue, oldValue) => {console.log('person的job變化了', newValue, oldValue)}, {immediate: true, deep: true})

特殊情況

    watch(() => person.job, (newValue, oldValue) => {console.log('person的job變化了', newValue, oldValue)}, {deep: true}) //此處由于監視的是reactive素定義的對象中的某個屬性，所以deep配置有效

停止監視

    const stopWatch =  watch(sum, (newValue, oldValue) => {console.log('sum變化了', newValue, oldValue)if (sum > 10) {stopWatch() // 停止監視}})

watchEffect

• watch的套路：既要指明監視的屬性，也要指明監視的回調。

• watchEffect的套路：不用指明監視的哪個屬性，監視的回調中用到哪個屬性，那就監視哪個屬性。

• watchEffect有點像computed：

• 但computed注重的計算出來的值（回調函數的返回值），所以必須要寫返回值。而watchEffect更注重的是過程（回調函數的函數體），所以不用寫返回值。

// watchEffect所指定的回調中用到的數據只要發生變化，則直接重新執行回調。初始化也會執行一次watchEffect(()=>{const x1 = sum.valueconst x2 = person.ageconsole.log('watchEffect配置的回調執行了')
})