副作用

纯函数 pure function

• 相同的输入，永远会得到相同的输出
• 没有副作用

// 纯函数
const double = x=>x*2
// 非纯函数
const randomValue = Math.random()

在vue、react中的纯函数思想：输入数据=>返回界面

副作用-函数外部环境发生的交互

除了输入输出之外的，和外部环境发生交互的函数。 如：

• 网络请求
• DOM操作
• 订阅数据来源
• 写入文件系统
• 获取用户输入

react中的副作用函数useEffect

function hello(props){

  // 每次加载完成执行此方法
  useEffect(()=>{
    console.log('mounted')
  })

  return <h1>{props.msg}</h1>
}

vue setup中的副作用函数 watchEffect

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

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只会在依赖值更新后执行
• 可以访问数据更新前后的值