副作用
纯函数 pure function
- 相同的输入,永远会得到相同的输出
- 没有副作用
javascript
// 纯函数
const double = x=>x*2
// 非纯函数
const randomValue = Math.random()
在vue
、react
中的纯函数思想:输入数据=>
返回界面
副作用-函数外部环境发生的交互
除了输入输出之外的,和外部环境发生交互的函数。 如:
- 网络请求
DOM
操作- 订阅数据来源
- 写入文件系统
- 获取用户输入
react
中的副作用函数useEffect
javascript
function hello(props){
// 每次加载完成执行此方法
useEffect(()=>{
console.log('mounted')
})
return <h1>{props.msg}</h1>
}
vue setup
中的副作用函数 watchEffect
javascript
const {watchEffect,ref} from 'vue';
import axios from 'axios'
export default defineComponent({
setup(props){
const count = ref(0)
// 响应 watchEffect 回调函数中依赖的响应式对象。
const destroy = watchEffect((onInvalidate)=>{
console.log(props.msg)
console.log(count)
// 使用 onInvalidate 将副作用执行失效
const source = axios.CancelToken.source()
axios.get('...',{
cancelToken:source.token
}).catch(err=>{
console.log(err)
})
onInvalidate(()=>{
source.cancel('取消请求')
})
},{
// 默认在 update 之前执行,可使用flush调整为update之后执行
// react 默认在 update 之后执行,不可修改
flush:'pre'
})
// 销毁
destroy()
return {
count
}
}
})
watch
精确控制 effect
javascript
const {watch,ref} from 'vue';
export default defineComponent({
setup(props){
const count = ref(0)
// 第一个参数需要是响应式对象
watch(count,(newValue,oldValue)=>{
console.log('change')
})
// 或者传入一个函数,返回响应式对象的值
watch(()=>props.msg,(newValue,oldValue)=>{
console.log('change')
})
// 多个值
watch([()=>props.msg,count],(newValue,oldValue)=>{
console.log('change')
})
return {
count
}
}
})
和 watchEffect
的区别
- 懒执行副作用,只针对某个响应式变量去执行
- 定义什么状态下执行,
watchEffect
只会在依赖值更新后执行 - 可以访问数据更新前后的值