最近我们在学习vue3源码,里面涉及到了没有见过的方法,这篇博客就先简单介绍一下什么是effect方法吧。
effect是响应式核心,它的作用和Watcher一样,是用来注册副作用函数的一个方法,那么什么是副作用函数呢?可以理解为一个函数的执行,会影响到另一个函数的执行,比如:
var num=0;
function func1(){
num=5
}
function func2(){
num=10
}
可以看到func1函数将num的值修改为5,但当func2函数执行时将num的值修改为10,也就是产生了副作用。
effect方法接收的函数便叫做副作用函数。
effect(()=>{
allName=firstName+lastName
})
//那么()=>{
// allName=firstName+lastName
//}便是副作用函数
effect所做的事情就是讲这个原本属于用户的逻辑封装起来,交给框架来管理,在适当的时候去调用执行,而在vue中的适当时机便是首次渲染和它所依赖的数据更新时。
页面首次渲染时,执行effect方法,将副作用函数收集起来执行,此时需要用到响应式数据,记住副作用函数所依赖的数据,当依赖数据发生更新时,再通知副作用函数再次执行