computed函數
import {reactive,computed} from 'vue'
export default {name: "DemoVue",setup(){//數據定義let person = reactive({firstName : '李',lastName : '四',age:18,})//計算屬性定義-簡寫形式person.fullName = computed(()=>{return person.firstName+'-'+person.lastName})//計算屬性完整寫法person.fullName = computed({get(){return person.firstName+'-'+person.lastName},set(value){//當計算屬性被修改時，value存儲著修改之后的值const nameArr = value.split('-')person.firstName = nameArr[0]person.lastName = nameArr[1]}})//setup必須有返回值return {person,}}
}
watch函數
與vue2中watch功能一致
但存在兩個小“坑”：
- 監視reactive定義的響應式數據時（整個對象），oldValue無法正確獲取，強制開啟了深度監視，（deep配置失效）
- 監視reactive定義的響應式數據中的某個屬性時（對象中的某個屬性），deep配置有效
導入函數
import {watch} from 'vue'
具體用法
setup(){//數據定義let sum = ref(0)let msg = ref('你好啊')let person = reactive({name:'張三',age:18,job:{j1:{salary:20}}})//情況一：監視ref所定義的一個響應式數據watch(sum,(newValue,oldValue)=>{console.log(`數據sum發生改變了，當前值為${newValue},舊值為${oldValue}`)},{immediate:true})//情況二：監視ref所定義的多個響應式數據watch([sum,msg],(newValue,oldValue)=>{console.log('數據sum或者msg發生改變了',newValue,oldValue)},{immediate:true})/*情況三：監視reactive所定義的一個響應式數據的全部屬性,但需要注意的是：1. 無法正確地獲取到oldValue2. 強制開啟了深度監視，但目前無法關閉*/watch(person,(newValue,oldValue)=>{console.log('person變化了!',newValue,oldValue)})//情況四：監視reactive所定義的一個響應式數據中的某個屬性watch(()=>{return person.age},(newValue,oldValue)=>{console.log('person的age屬性變化了!',newValue,oldValue)})//情況五：監視reactive所定義的一個響應式數據中的某些屬性(寫法1)watch(()=>{return {age:person.age,name:person.name}},(newValue,oldValue)=>{console.log('person的一些屬性變化了!',newValue,oldValue)})//情況五：監視reactive所定義的一個響應式數據中的某些屬性(寫法2)watch([()=>{return person.age},()=>{return person.name}],(newValue,oldValue)=>{console.log('person的一些屬性變化了!',newValue,oldValue)})//setup必須有返回值return {sum,msg,person,}}
