带你手撕一个简易响应式副作用函数

前言

彦祖们,开发 vue3 的时候,我们肯定用过 watchEffect

官网解释:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。 第一个参数就是要运行的副作用函数

此时引入了副作用函数这个概念,那么到底什么是副作用函数呢?

什么是副作用函数?

其实副作用函数就是指会产生副作用的函数(...听君一席话,听君一席话)

言归正传,副作用函数其实就是除了本函数还有其他函数能修改本函数执行效果的函数

比如说,我们写一个函数,这个函数内部修改了 body 标签的 innerHTML

除了这个函数,其他函数也具备修改 body 标签的 innerHTML 能力

此时我们就把这个函数 effect 就是称为副作用函数

js 复制代码
function effect() {
  document.body.innerHTML = 'Hello Daniel Wu'
}

document.body.innerHTML = 'Hello Edision' // 外部可以修改 innerHTML

无副作用函数

相比副作用函数,我们再来看下无副作用函数

其实也很简单

js 复制代码
function sum(a, b) {
  return a + b
}

这个函数,我们只返回了 a + b 的结果,并不具备任何的副作用(其他外部函数无法影响这个函数的执行结果)

什么是响应式?

现在我们已经知道什么是副作用函数了,那么我们再来看下什么是响应式?

响应式就是指,当数据发生变化的时候,我们希望对应的副作用函数也能执行的过程

比如说

js 复制代码
const person = {name:'Daniel Wu',age:18}
function effect() {
  document.body.innerHTML = 'Hello ' + person.name
}
effect()

当我们修改 person.name 的时候,我们希望 effect 函数能够执行

当然最简单的方式就是手动执行

js 复制代码
person.name = 'Edison'
effect() // 手动执行副作用函数

此时 innerHTML 就变成下图所示

那么我们如何让 person.name 发生变化的时候,自动执行副作用函数呢?

实现响应式

响应式原理

其实思路也很简单,不就是监听 person.name 变化,然后执行副作用函数

监听 person.name 变化? 这不就是八股文中常考的 Proxy 拦截吗?

代码非常简单

js 复制代码
const person = {name:'Daniel Wu',age:18}

const proxyPerson = new Proxy(person,{
  // set 拦截器
  set(target,key,value) {
    target[key] = value
    effect() // 进入拦截器的时候执行 effect 函数
    return true
  }
})

获取到代理对象后,我们把之前的 person 都替换成代理对象 proxyPerson

完整代码

js 复制代码
const person = {name:'Daniel Wu',age:18}

const proxyPerson = new Proxy(person,{
  // set 拦截器
  set(target,key,value) {
    target[key] = value
    effect() // 进入拦截器的时候执行 effect 函数
    return true
  }
})
function effect() {
  document.body.innerHTML = 'Hello ' + proxyPerson.name
}

proxyPerson.name = 'Edison' // 此时进入 set 函数,自动修改了 innerHTML

总结

以上我们就实现了一个非常简单的响应式副作用函数

其核心就是利用 Proxy 实现 set 拦截,然后在拦截器内部执行副作用函数

下一节我们将学习做一个更通用 effect 函数

写在最后

感谢彦祖们的阅读

个人能力有限

如有不对,欢迎指正 🌟 如有帮助,建议小心心大拇指三连🌟

相关推荐
Myli_ing26 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风29 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave36 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟38 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架