这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
vue3 watchEffect 和 react useEffect的用法差不多
取消副作用的函数触发方式不同
useEffect 是通过return 返回函数来触发 可以先看一下react useEffect 用法
import react,{ useEffect,useState } from 'react'
function App() {
let [conut,setCount] = useState(0)
setTimeout(()=>{
setCount(1000)
},2000)
function getData() {
return new Promise((reslove)=>{
reslove(1111)
})
}
// 使用useEffect
useEffect( ()=>{ // useEffect 里的函数 不能是异步函数 只能是同步函数 ，如果需要执行异步操作，需要在里面封装一层
console.log(conut) // 可以打印出 0 1000
// 主要就是接收函数(错误写法)
let data =await getData()// 1 在这里如果我们不写 取消副作用函数 会报错 看下面的图
//2 如果我们在这里用到了 async await语法糖 我们需要在里一个函数里去处理 不能暴露在这里 因为await会隐试返回，会和下面的return冲突 所以会报错
// 正确写法
async function a() { // 一步封装了一层
let data = await getData()
console.log(data)
}
// 执行a
a()
// 取消副作用函数
return ()=>{
console.log('onInvalidate') // 每次conut变化 首先会触发‘onInvalidate’
}
}, [ conut ]) // 第两个参数需要把我们监听的参数自己写上
return '<div></div>'
}
export default App
vue3 watchEffect 用法 之前写过之前写的watchEffect
在这里就简单写下
watchEffect((onInvalidate)=>{
onInvalidate(()=>{ // onInvalidate函数是取消副作用函数
})
这里没有用return函数 或者在async await 被隐式返回了
})
react useEffect 如果执行了 有副作用的函数 必须要返回function函数 这个函数就是清除副作用的，尤其是 async await 语法糖现在用的比较普遍，在useEffect需要单独写在一个函数里，无法暴露，不然就会报错，上如图的提示这样，写起来的比较麻烦，当然这个还是分每个人的习惯，以上只是一些浅显的看法
vue3 watchEffect 看起可能比较优雅一点，在watchEffect里可以写异步函数，取消副作用函数被提到了参数里，不用return 或者说 隐式的使用了return 毕竟一步函数会隐式返回
