vue3.0的computed函数,watch函数和watchEffect函数

computed

• 与vue2.x中computed配置功能一致
• 写法

  const person = reactive({
   fistName:"Mr",
   lastName:"long"
  }) 
// 计算属性简写
let fullName = computed(()=>{
return person.fistName + '-' + person.lastName
})

// 计算属性完整写法
let fullName = computed({
 get(){
  return person.fistName + '-' + person.lastName
 },
 set(value){
      const newArr = value.split('-')
      person.fistName = newArr[0]
      person.lastName = newArr[1]
 }
})

watch函数

• 与vue2.x中的配置功能一致
• 两个小坑
  • 监视reactive定义的响应式数据时，oldValue无法获取正确获取,强制开启了deep深度监听(deep设置无效)
  • 监视reactive定义的响应式数据中的某个属性时(这个属性必须是个对象),deep配置有效。

// 情况一监视ref响应式数据
 watch(count,(newValue,oldValue)=>{
     console.log(newValue,oldValue)
 },{immediate:true}) // immediate 立即监听

// 情况二 监视多个ref响应式数据
watch([count,name],(newValue,oldValue) =>{
    console.log(newValue,oldValue) // 此时value的数据是数组
})
// 情况三 监听reactvie响应式数据
//        如果watch监视是reactive定义的响应式数据，则无法获取正确的oldValue,且强制开启深度监听。
   watch(person,(newValue,oldValue)=>{
       console.log(newValue,oldValue) // 两个值一致都是一样的
   })
  
  // 情况四 监听reactive定义的响应式数据的某个属性(基础数据类型)
  watch(()=>person.name,(newValue,oldValue) =>{
      console.log(newValue,oldValue)
  })
  
 // 情况五 监听多个reactive定义的多个响应式数据的属性(基础数据类型)
 watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
  console.log(newValue,oldValue)
 })
 
 // 情况六 监听reactive定义的响应式数据的某个属性(复杂数据类型)时
 watch(() => person.class,(newValue,oldValue) =>{
        // 此时的class 为 { b:{c:20 } }
   console.log(newValue,oldValue)
 },{deep:true}) // 想要监听c值的变化 则需要开启deep深度监听

watchEffect

• watch的套路是:既要指明监听的属性,也要指明监听的回调函数。
• watchEffect的套路是:不需要指明监听的属性,监听中的回调函数用到了那个属性，就监听那个属性。
• watchEffect跟computed有点像:
  • computed注重是计算出来的值,所以必须要有返回值。
  • watchEffect更注重是过程，所以不用写返回值。

// watchEffect所指定的回调函数中用到的数据只要发生了变化，则重新执行回调。
watchEffect(()=>{
const age = person.age
const count = person.count
console.log('watchEffect 配置回调函数执行了。')
})