【手写reactive】

VUE3生态源码篇——手写响应式

实现手写reactive

---

---

前言

vue3的核心模块是通过响应式机制来通知的，响应式机制可以自动收集系统中数据的依赖，并且在修改数据之后自动执行更新，极大提高开发的效率。

响应式机制的主要功能是： 可以把普通js对象封装成为响应式对象，拦截数据的获取和修改操作，实现依赖数据的自动化更新。
最简单的响应式模型，可以通过reactive或ref函数，把数据包裹成响应式对象，并通过effect函数注册回调函数，然后在数据修改之后，响应式地通知effect去执行回调函数。

---

一、用手写的reactive实现以下功能

const {
   effect, reactive} = require('@vue/reactivity')

let dummy
const counter = reactive({
    num1: 1, num2: 2 })
effect(() => {
   
  dummy = counter.num1 + counter.num2
  console.log(dummy)// 每次counter.num1修改都会响应式地打印日志
})
setInterval(()=>{
   
  counter.num1++
},1000)

每次count.value修改之后，effect函数如何知道count已经变化了呢？我们先来看整体的流程。

二、整体流程

vue3的响应式是通过proxy实现的。effect中获取counter.num1 和counter.num2的时候，就会触发counter的get函数。get函数，会把当前的effect函数注册到一个全局的依赖地图。因此，counter.num1修改的时候，就会触发set拦截函数，去依赖地图找到注册的effect函数。

三、源码实现

1、首先，reactive是通过ES6的Proxy特征实现的属性拦截（可参考MDN），所以，直接返回new Proxy即可，reactive.js里面我们可以这么写：

import {
   
    mutableHandlers,
  } from "./baseHandlers"
export const reactiveMap = new WeakMap();
export function reactive(target) {
   
    if (typeof target != 'object') {
   
        console.log(`reactive ${
     target} 必须是一个对象`