Vue3.0知识点总结(二)——computed() watch() watchEffect()函数

一.computed()函数

与vue2.0中配置功能写法是一样的

import {computed} from 'vue'
setup(){
//计算属性简写
let fullname=computed(()=>{
return preson.firstname+"-"+ preson.lastname
})
//完整写法
let fullname=computed(()=>{
get(){
return  只读
}
set(){
  return  修改
}
})
}

二.watch()函数

与vue2.0中配置功能写法是一样的

import {watch} from 'vue'
//情况一：监视ref
watch(sum,(newvalue,oldvalue)=>{
console.log(newvalue,oldvalue)
},{immediate:true})
//情况二：监视ref多个属性
watch([sum ,sun],(newvalue,oldvalue)=>{
console.log(newvalue,oldvalue)
},{immediate:true})
//情况三  监视reactive定义的响应数据
watch(preson,(newvalue,oldvalue)=>{
console.log(newvalue,oldvalue)
},{immediate:true,deep:true})

注意：如果对象是ref生成的对象属性，怎么监听

方法一：在监听的对象后加 .value

//情况三  监视ref定义的响应数据
watch(preson.value,(newvalue,oldvalue)=>{
console.log(newvalue,oldvalue)
},)

方法二：加deep:true

  watch(preson, (a, b) => {
      console.log(a, b);
    },{deep:true});

注意：如果是ref生成的基本属性监听时不加.value

 三.watchEffect()

相比于watch()，watchEffect()就比较智能，它能智能监听哪个数据变化——监视回调中用到哪个属性就监听那个属性

watchEffect(){
const x=a       //只要a变化就调用
console.log("监视到了")
}

 watchEffect()和computed()区别

他两有点相似但是

1.computed注重计算出来的值，所以必须要写return

2.watchEffect注重的是过程，所以不用写返回值