Vue3语法糖setup（二）

在vue2中watch和computed这两个api对我们的帮助非常大，今天就说一说这两个Api

computed

computed在vue3中以函数形式存在，传入一个对象，当里面的依赖被读取是，调用get函数，被修改时调用set函数
会返回一个ref对象 

写一个经典案例

有个需求，给你一个姓，一个名，需要我们输出姓名，有的同学可能会直接采用字符串拼接，这样也可以，但是我们现在使用计算属性来试一下

set和get

set函数中所依赖的变量，一但被修改，便会立即执行set函数

get函数中所依赖的变量，只要被读取，就会执行get函数

这两个函数很简单，是vue2中响应式的原理

案例

定义lastName，firstName，update更新函数，fullName为姓名

setup() {
  const firstName = ref("李")
  const lastName = ref("华")
  const update = ()=>{
    firstName.value = "孙"
  }
  let fullName = computed({
    get(){
      console.log("get"+'函数被调用');
      return firstName.value+lastName.value
    },
    set(value){
      console.log(“set函数被调用”);
    }
  })
  return {
    fullName,
    update
  }
} 

fullName为计算属性，当get依赖被修改时，会立即执行get函数，并且返回新的数据，当fullname本身被修改时才会调用，set函数，这两个是有区别的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UZMaZeEW-1655790549116)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52d0189e8e8b42a2877883187bce5ef2~tplv-k3u1fbpfcp-zoom-in