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,}}
