在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