vue3.0的计算属性与监视

vue3中计算属性的使用方法：

不同于vue2，computed中有两个方法，一个是读取get，另一个是修改set，如下图所示

const fullName2 = computed({
   get(){},
   set(){},
 })

如果计算属性的函数中如果只传入一个回调函数，表示get,

const fullName = computed(()=> {
   return user.firstname + user.lastname
 })

对多个数据进行计算数据的绑定
set中传入的参数，指的是get的返回值

const fullName = computed(()=> {
        return user.firstname + user.lastname
      })
      console.log(fullName)

      const fullName2 = computed({
        get(){
          return user.firstname + user.lastname
        },
        set(val:string){
        },
      })

watch监视：
此处的val指的就是被监视的user

watch(user,(val)=>{
  fullName3.value = firstname + '_' + lastname
},{immediate:true,deep:true})

immediate:true会马上执行
deep:true对对象有个深度监视

watch(user,({firstname,lastname})=>{
  fullName3.value = firstname + '_' + lastname
},{immediate:true,deep:true})

监视多个数据：

写成数组的形式：

watch([user,fullName3],()=>{
  console.log('====')
})

对于响应式数据和非响应式数据监视的写法：

const user = reactive({
  // 姓氏
  firstname:'东方',
  // 名字
  lastname:'不败'
})

const fullName3 = ref()

这样写是不会起作用的

watch([user.firstname,user.lastname],()=>{
  console.log('====')
})

正确写法：

watch([()=>user.firstname,()=>user.lastname],()=>{
 console.log('====')
})

watchEffect监视：
这种监视是不需要配置immediate，默认执行一次

watchEffect(()=>{
  fullName3.value = user.firstname + '_' + user.lastname
})