computed
首先要引入computed
import {computed} from 'vue'
在setup中写 //简写形式
let fullName = computed(()=>{
return person.firstName+ '-' + person.lastName
})
------------------------------------------------------------------
watch
引入watch
import {watch} from 'vue'
在setup中写的
----------------------------------------------
一. 监视ref所定义的一个响应式数据
watch(sum,(newValue,oldValue=>{ //newValue 新数据
console.log('sum变化',newValue,oldValue)
}, {immediate:true} )
//immediate:true 页面初始化好时调用一次watch
----------------------------------------------
二.监听ref所定义的多个响应式数据
watch([sum,msg] , (newValue,oldValue)=>{
console.log('sum/msg变化',newValue,oldValue)
//此处的newValue和old...都为数组形式 包含着监听的这两个书的
}
----------------------------------------------
三.监视reactive所定义的一个响应式数据(全部属性) person
当watch的对象时reactive的全部属性时,会出现以下两个注意点
1.注意:无法正确获取oldValue
2.注意:强制开启了深度监视(deep配置无效) 改成false也没用
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
})
oldValue问题无法解决 慎用 虽然一般不用oldValue