这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
vue3 computed和vue2 computed用法上差不多
vue2的用法 简单写下
{
data: function() {
return{
a: 1,
b: 2
}
},
computed: {
add: function() {
return this.a+this.b
}
}
}
vue3 的简单写法
一般情况下第一种方式用的多
import { computed,ref } from 'vue' // 在vue里解构出来
{
setup(props,ctx) {
let g = ref(1)
let h = computed(()=> 'fasfasas'+g) // computed就是在getter上又多加了一层，也就是有两个getter
return {
h
}
}
}
// 第二种写法
{
setup(props,ctx) {
let g = ref(1)
let h = computed({ // 第两种方式 是可以设置get set
getter: function() {
return g+1
}
setter: function(val) {
g.value = val-1
}
})
}
}
watchEffect 会立即执行，并且响应式的追踪依赖 (watchEffect源码上会有一个依赖收集的过程，并且响应式的监听，只要数据改变了就回去再去执行) 注意 在当前组件卸载/销毁的时候 watchEffect会停止监听
watchEffect 会返回一个具柄函数 如果你执行了 watchEffect返回的参数 也会停止监听
没有执行返回的stop 执行
上面是打印的log
上面图片是执行了stop代码的截图
下面是log 执行了一次
watchEffect副作用(如请求数据)
watchEffect((onInvalidate)=>{ //watchEffect里也有一个传过来的参数
// onInvalidate也是一个函数 调用的话 需要传一个参数
onInvalidate(()=>{ // 这个函数什么时候会执行 第一次不会执行，只有在所监听的数据即将发生改变了之后才会执行
console.log('onInvalidate')
})
})
上面说的可能比较理论一点，咱们看下代码，和日志
这是打印出来的日志
大家看可以看到 都是在数据变化之前就触发了onInvalidate函数
这个用法的一个场景就是截流了，一个输入框我们输入文字，然后请求接口,当时我们需要它最后一次才执行，在这里的用法
watchEffect(async function(onInvalidate) {
let g = await ajax()
onInvalidate(()=>{ // 在这里截流
})
})
上面是一个简单的场景介绍
