Vue学习笔记-Vue3中的计算属性与监视属性

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功能一致
但存在两个小“坑”：

1. 监视reactive定义的响应式数据时（整个对象），oldValue无法正确获取，强制开启了深度监视，（deep配置失效）
2. 监视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. 无法正确地获取到oldValue
        2. 强制开启了深度监视，但目前无法关闭
    */
    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,
    }
  }