likes
comments
collection

说一下vue3响应式原理?可不止只有proxy

作者站长头像
站长
· 阅读数 13

凭借着之前的学习积累,用自己的方式叙述一下自己所学的知识点,笔者高中讨厌写作文,硕士期间不喜写论文,水平肯定有限,能详述之前所学的知识已是不易,若能给读者带来一点启发,将倍感荣幸,同时也虚心接受大佬、同仁指点。

Monorepo管理项目

  • Monorepo是管理代码的一种方式,可以在一个项目仓库下,管理多个 子项目,Vue3注重模块的拆分,单个模块可以单独使用,不需要引入完整的vuejs包。因此,Vue3使用Monorepo管理项目,每个模块都单独放在packages目录下。
  • 大佬的文章:Monorepo详解

Monorepo环境搭建

  • pnpm是快速的,节省空间的包管理器,类似于npm、yarn。主要采用符号链接的方式管理模块。
  • 全局安装npm install pnpm -g # 全局安装pnpm
  • 初始化: pnpm init -y # 初始化配置文件
  • 这里我们尝试安装一下vue3:pnpm install vue@next,我们发现在node_modules下的vue文件夹下,只有vue的集成文件,没有其各个模块的依赖文件,这是因为pnpm对依赖文件做了处理,全部隐藏在node_modules/.pnpm文件夹下。这样操作避免了幽灵依赖的问题。
    • 所谓幽灵依赖,是指当项目中引入了A包后,如果A包内部引用了B包,在npm A包的时候同时也会把B包给下载下来,这就导致了一个问题,项目中没有要求下载B包,package.json中也只有A包的依赖记录,但是自然而然的,代码中却可以引用B包。
    • 我们的npm包管理方式,显然就是这种模式,要想按照npm的方式,把模块的依赖模块保留,只需要根目录创建.npmrc文件,将依赖提升即可:shamefully-hoist = true
    • 这样,重新安装vue3,发现已经能看到其所有的依赖 说一下vue3响应式原理?可不止只有proxy
  • vue3每个包都是一个独立的模块,并且可以单独引用,因此需要在项目的packages文件夹下,挨个创建vue3的模块,模块之间可以相互引用,新建pnpm-workspace.yaml文件将packages下的所有目录都标记为包进行管理,这样Monorepo的环境就搭建好了。
packages:
 - 'packages/*'
  • 此时,如果我们卸载安装的Vue,重新安装,控制台将会报错,原因就是,你的包得安装在packages目录下,我们可以使用pnpm install vue -w,来强制安装到外层的node_modules中

开发环境安装

  • 我们写的源码需要打包,这里使用esbuild来打包我们的Vue源码,使用typescript来标注类型,使用minimist来监视控制台命令,因此需要全部安装:pnpm install esbuild typescript minimist -D -w
  • 使用ts的话,需要配置ts相关的命令:pnpm tsc --init,生成tsconfig.json文件,在文件中配置:
{

  "compilerOptions": {

    "outDir": "dist",

    "sourceMap": true, // 采用sourcemap

    "target": "es2016", // 目标语法

    "module": "esnext", // 模块格式

    "moduleResolution": "node", // 模块解析方式

    "strict": false, // 严格模式

    "resolveJsonModule": true, // 解析json模块

    "esModuleInterop": true, // 允许通过es6语法引入commonjs模块

    "jsx": "preserve", // jsx 不转义

    "lib": ["esnext", "dom"], // 支持的类库 esnext及dom

    "baseUrl": ".",

    "paths": {

      "@vue/*": ["packages/*/src"]

    }

  }

}

一个库必须要考虑的一步:打包源码

打包的格式

我们打开node_modules下的vue包的dist文件夹,发现vue打包的文件有多种格式,这是为了给用户在不同的使用场景下使用的,打包的格式不同,对用的使用规范也是不同的。

说一下vue3响应式原理?可不止只有proxy

  • 总体来说可以分为三种格式:
    • node中使用的格式:commonjs(cjs)格式
    • esmodule使用的格式:esm
      • esm-bundler:将所有模块打包时集成到一起
    • 浏览器直接通过script引入来使用的格式:iife自执行函数(global)

包与包之间的依赖

vue3的响应式是一个独立的包,通过包管理工具下载的vue3可以看出来,里面有一个reactivity包,就是vue的响应式模块,shared包是存放公共逻辑的模块。

说一下vue3响应式原理?可不止只有proxy

  • 模仿vue包在项目中创建packages文件夹:
    • 分别在该文件夹下创建 reativity文件夹和shared文件夹
    • 分别在两个文件夹通过 pnpm init 初始化项目模块,然后创建scr/index.ts作为该模块打包的入口文件
    • 为方便模块的打包和模块间引用,两个模块的package.json分别配置如下:
{
 "name": "@vue/reactivity", 
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "module": "dist/reactivity.esm-bundler.js",
 "scripts": {},
 "buildOptions": {
   "name": "reactivity",
   "formats": [
     "esm-browser",
     "esm-bundler",
     "cjs",
     "global"
   ]
 },
 "dependencies": {},
 "devDependencies": {}
}
{
 "name": "@vue/shared",
 "version": "1.0.0",
 "description": "",
 "module": "dist/shared.esm-bundler.js",
 "scripts": {},
 "keywords": [],
 "author": "",
 "license": "ISC",
 "buildOptions": {
   "name": "reactivity",
   "formats": [
     "esm-browser",
     "esm-bundler",
     "cjs",
     "global"
   ]
 },
 "dependencies": {},
 "devDependencies": {}
}
  • 我们在shared/src/index.ts下简单导出一个函数
export function isObject(value:any){
   return value !==null && typeof value == 'object'
}
  • 而在reactivity中引入这个模块就很简单,只需要import {isObject } from '@vue/shared'即可。
    • 这里的路径@vue不会去node_modules下查找,原因是我们在tsconfig.json中配置了paths。

模块的打包流程

  • 在根目录下新建script/dev.js脚本,通过运行该脚本实现模块的打包
  • 在根目录package.json的script下,配置运行脚本的命令"dev": "node scripts/dev.js reactivity -f esm",
    • 使用npm run dev ,会运行dev.js,默认打包reactivity模块,默认格式为esm
  • 至此,我们梳理一下打包的流程:
    • 首先,用户输入npm run dev **,运行打包脚本,同时传入打包的参数
    • dev.js运行,接收用户传入的参数
    • 根据参数,确定打包的模块,打包的格式,打包的输出目录
    • 调用esbuild模块,对模块进行打包。
  • 了解了基本的流程,我们开始对dev脚本进行完善。
    • 首先,接收用户的参数,我们知道,通过process.argv可以获取用户在命令台输入的命令,而minimist就是一个很好的解析命令的模块,将命令传给minmist,它可以解析成固定的格式传给我们,我们在控制台输入npm run dev:
    const args = require('minimist')(process.argv.slice(2))
    console.log(args) // { _: [ 'reactivity' ], f: 'esm' }
    
    • 了解了它的格式,我们就能解析,获取用户的命令,从而确定要打包的文件夹,打包格式,以及输出地址等。
    const target = args._[0] || 'reactivity'
    const format = agrs.f || 'global'
    //查找打包模块下的package.json
    const pkg = require(path.resolve(__dirname,`../packages/${target}/package.json`))
    
    //输出格式
    const outputFormat = format.startsWith('global') ? 'iife' : format== 'cjs'?'cjs':'esm'
    //输出地址
    const outFile = path.resolve(__dirname,`../packages/${target}/dist/${target}.${format}.js`)
    
    • 然后调用esbuild中的build函数,打包即可
    //输出地址
    const outFile = path.resolve(__dirname,`../packages/${target}/dist/${target}.${format}.js`)
    build({
      entryPoints: [path.resolve(__dirname, `../packages/${target}/src/index.ts`)],
      outfile: outFile,
      bundle: true,
      sourcemap: true,
      format: outputFormat,
      globalName: pkg.buildOptions?.name,
      watch: {
        onRebuild(error) {
          if (error) console.log('~~~')
        }
      },
      platform: form
    
    • 运行命令,可以看到reactivity文件夹下生成打包的文件

说一下vue3响应式原理?可不止只有proxy

万事俱备,响应式开造

最开始的两个函数

相信大家在最开始接触响应式的时候,必会接触一个函数reactive,函数的作用想必大家也都清楚:将一个对象变成响应式。还有一个函数叫effect,他能监听一个函数,当响应式数据变化后,让这个函数重新执行。这个函数可能大家有点陌生,原因就是在使用Vue的时候,基本使用的都是html模板,数据改变,模板重新刷新

<body>
  <div id="app"></div>
  <script type="module">
    import { reactive,effect } from '/node_modules/@vue/reactivity/dist/reactivity.esm-browser.js'
    const state = reactive({
      name:'宫本',
      age:18
    })
    //传入一个副作用函数
    effect(()=>{
       document.getElementById('app').innerHTML = state.name +":"+ state.age
    })
    setTimeout(()=>{
      state.age=19
    },1000)
  </script>
</body>

可以看到,vue的响应式基本靠这个函数可以诠释,我们接下来就尝试实现这两个函数

  • 在reactivity/src下新建effect.ts文件和reactive.ts文件,分别声明这两个函数,并在index.ts中集成导出

reactive函数实现

  • 首先尝试实现一下reactive函数,我们可以模仿着源码里的原函数的功能去构思:

    • 首先,reactive接收一个对象,不是对象那直接返回即可
    • 其次,要对这个对象做一下代理
    import { isObject } from "@vue/shared";
    export function reactive(target){
      if(!isObject(target)){
        return target
      }
    
      const proxyObj = new Proxy(target,{
        get(target,key,receiver){
          return target[key]
        },
        set(target,key,value,receiver){
          target[key] = value
          return true
        }
      })
    }
    
    • 我们可以很容易的想到利用proxy对数据做代理,这样取数据和改变数据的时候都可以监测到,但是这里面有一个很大的问题:
    const obj = {
    name:'小明',
    get getName(){
    return this.name
    }
    }
    
    const proxy = new Proxy(obj,{
      get(target,key,receiver){
         console.log(key)
        return target[key]
      },
      set(target,key,value,receiver){
        return true
      }
    })
    
    console.log('sx',proxy.getName)
    

    我们可以梳理一下这个流程:访问proxy.getName,由于proxy是Porxy实例,所以访问属性的时候会触发get操作,返回对象的target[key],此时的target是obj,key是getName,控制台输出getName,相当于执行obj.getName。最关键的一步来了,getName里面会访问name属性,此时是会访问obj里面的name,还是会访问proxy里面的name?

    按照我们响应式的设想,访问了getName之后也会访问到name,既然有属性被访问,都应该被监测到,但是这里的name属性不会被监测,原因就是执行target[key]后,这里的this指向obj,所以会自然走到obj.name中,不会走proxy.name,既然不会代理,自然不会被监测到。

    显然,这不符合我们响应式的预期,那么如何解决属性里面this指向的问题,让它一直指向proxy实例呢?Reflect对象可以将this指针绑定在传入的对象上,完美解决这个问题。Reflect介绍

    const obj = {
        name:'小明',
        get getName(){
          return this.name
        }
          }
    
      const proxy = new Proxy(obj,{
        get(target,key,receiver){
           console.log(key)
          return Reflect.get(target,key,receiver)
        },
        set(target,key,value,receiver){
          return Reflect.set(target,key,value,receiver)
        }
      })
    
      console.log('sx',proxy.getName)
    

    Reflect.get中最后一个参数receiver表示当前实例proxy,它会将操作的指针绑定在proxy上,这样访问任何属性,都会触发代理。

  • 上述对数据实现简单的代理,目的是在获取属性和修改属性的时候能有感知和拦截(get,set),但是这个代理对象依然有很大的问题。我们来仔细探究一下:

    • 假如有个老六写出下面这种代码:
     const obj = {
     name:'宫本',
     age:18
    }
    const state1 = reactive(obj)
    const state2 = reactive(obj)
    

    对一个数据同时代理两次,很显然两个代理对象是不相等的,因为开辟了两个内存空间,这显然不符合我们的预期要求,因为对一个数据的代理对象只能有一个,不然后面使用代理对象,使用哪一个呢,数据都不同步了,不断创建空间,对性能也开销很大。

    对此在对一次代理对象的时候,可以在reactive内部对对象做缓存,当再次代理同一个对象的时候,取出这个缓存即可。

    import { isObject } from "@vue/shared";
    //get,set操作抽离到baseHandles中
    import { mutableHandlers } from './baseHandles'
    const reactiveMap =new WeakMap()
    export function reactive(target){
     if(!isObject(target)){
       return target
     }
     const existProxy = reactiveMap.get(target)
     if(existProxy){
       return existProxy
     }
     const proxyObj = new Proxy(target,mutableHandlers)
     reactiveMap.set(target,proxyObj)
     return proxyObj
    }
    
    • 假如老六又写出这种代码:
    const obj = {
        name:'宫本',
        age:18
      }
      const state1 = reactive(obj)
      const state2 = reactive(state2)
    

代理对象也是个对象,也能作为reactive的参数,但是对代理对象做代理,显然没有什么意义,vue中针对这种情况,是在内部判断传入的对象,如果已经是代理对象,则直接返回就行。而判断对象是代理对象的方式也很巧妙,它是通过尝试对对象进行取值,如果能触发get操作,则说明它是代理对象,直接返回该对象。

export enum ReactiveFlag {
  IS_REACTIVE = '__is_Reactive'
}

const reactiveMap =new WeakMap()
export function reactive(target){
  if(!isObject(target)){
    return target
  }
  //尝试触发对象的get操作
  if(target[ReactiveFlag.IS_REACTIVE]){
    return target
  }
  const existProxy = reactiveMap.get(target)
  if(existProxy){
    return existProxy
  }
  const proxyObj = new Proxy(target,mutableHandlers)
  reactiveMap.set(target,proxyObj)
  return proxyObj
}
  get(target,key,receiver){
    if(key === ReactiveFlag.IS_REACTIVE){
      return true
    }
    return target[key]
  },

effect函数实现

reactive数据代理函数初步实现之后,需要完成effect函数,该函数传入一个副作用函数,实际上,这个副作用函数会在effect函数内部默认执行一次,如果副作用函数里面有代理的数据,那么数据就会记住你这个effect函数,然后某个时间段数据变化了,这个数据就会找到它记住的effect函数,依次让这些函数执行,那么对应的,页面开始刷新,刷新后的数据就是最新的数据。

首先,effect函数内部会创建一个类,将传入的副作用函数传入这个类中,生成一个实例,实例有一个run方法,会在内部执行这个副作用函数。由于effect函数传入副作用函数后,会默认执行一次副作用函数。因此,其详细的流程应该是,effect传入副作用函数,内部根据副作用函数传入一个类中声明一个实例,实例调用run方法,执行副作用函数。


class ReactiveEffect{
  public active = true
  public deps=[]
  constructor(public fn){
  }
  run(){}
}


export function effect(fn){
  const _effect = new ReactiveEffect(fn);
  _effect.run()
}

ReactiveEffect是一个响应式类,意味着,通过这个类会创建一个响应式的实例,这个类在effect内部实例化。类中的active属性,是一个控制器,默认为true,意味着是否创建响应式 实例,因为有些场合不需要响应式(false),可以理解为是一个控制操作,后面的需求中会讲到。deps属性是一个收集装置,执行run函数会执行传入的副作用函数,副作用函数中会调用代理的数据,deps的作用就是记录当前的响应式实例所对应的代理数据。在里面调用了哪个数据,它就记录上哪个。

run函数内部判断active,若是为true,则执行副作用函数

run(){
    if(this.active){
      return this.fn()
    }
  }

下面就是最关键的一步,如何让effect与reactive联立起来,当effect内部调用副作用函数,让reactive感知到,并记录这个响应式函数以便下次更新再次执行这个函数,更新页面数据。

其实,我们可以根据js单线程的特点实现这个逻辑,假设我们创建一个全局指针,当创建响应式实例后,执行run函数前,将指针指向响应式实例,然后执行run函数,run函数内部执行副副作用函数,副作用函数内部访问代理属性,触发get操作,get内部收集相关数据对应的指针。然后某个时刻,数据改变,触发数据的set操作,更改数据,获取属性对应的指针集合,通过指针执行其run函数,再次执行副作用函数,访问数据,此时的数据是最新的,然后页面刷新。

 run(){
    if(!this.active){
      //直接执行函数,不进行后面的依赖收集
      return this.fn()
    }
    try {
      activeEvent = this
      return this.fn()
    }finally{
      //执行完之后,让指针置空
      activeEvent = null
    }
  }

在代理操作中,get读取到某个属性,监测当时是否在_effect中执行的(activeEffect存在),如果不是,则不需要进行依赖收集,如果是,则进行依赖收集,收集的格式是target -> key -> activeEffect,数据改变后,set中,取出收集的activeEffect集合,依次执行其run函数

get(target,key,receiver){
    if(key === ReactiveFlag.IS_REACTIVE){
      return true
    }
    //收集依赖
    if(activeEffect){
      //从对象中寻找键值,纪录键值对应的指针集合
      let depsMap = targetMap.get(target)
      if(!depsMap){
        targetMap.set(target,(depsMap = new Map()))
      }
      let deps = depsMap.get(key)
      if(!deps){
        depsMap.set(key,(deps = new Set()))
      }
      deps.add(activeEffect)
    }
    return target[key]
  },
  set(target,key,value,receiver){
    target[key] = value
    //数据更改,找到对应的key收集的_effect实例
    let depsMap = targetMap.get(target)
    if(!depsMap){
      //不存在,说明之前副作用函数中没有使用过这个属性,则这个属性改变不需要重现刷新页面
      return ;
    }
    let effects = depsMap.get(key)
    //依次执行
    if(effects){
      effects.forEach(effect=>effect.run())
    }
    return true
  }

我们尝试打包我们的代理,使用他们,发现已经可以实现简单的响应式

  <script type="module">
    import { reactive,effect } from './reactivity.esm.js'
    const obj = {
      name:'宫本',
      age:18
    }
    const state = reactive(obj)
   

    //传入一个副作用函数
    effect(()=>{
       document.getElementById('app').innerHTML = state.name +":"+ state.age
    })
    setTimeout(()=>{
      state.age=19
    },1000)
  </script>

说一下vue3响应式原理?可不止只有proxy

我们在代理对象中的set和get属性中设置了依赖收集和重新执行依赖的逻辑,对于这部分逻辑,我们可以抽离出来,使逻辑直接负责的任务更加纯粹一些

export const mutableHandlers = {
  get(target,key,receiver){
    if(key === ReactiveFlag.IS_REACTIVE){
      return true
    }
    track(target,key)
    return Reflect.get(target,key,receiver)
  },
  set(target,key,value,receiver){

    let oldValue =  target[key] 
    let r  = Reflect.set(target,key,value,receiver)
    if(oldValue !==value){
      trigger(target,key,value)
    }
    return r
   
  }
}
export function track(target,key){
   //收集依赖
   if(activeEffect){
    //从对象中寻找键值,纪录键值对应的指针集合
    let depsMap = targetMap.get(target)
    if(!depsMap){
      targetMap.set(target,(depsMap = new Map()))
    }
    let deps = depsMap.get(key)
    if(!deps){
      depsMap.set(key,(deps = new Set()))
    }
    deps.add(activeEffect)
    trackEffect(deps)
  }
}

export function trackEffect(deps){
  let shouldTrack = !deps.has(activeEffect)
  if(shouldTrack){
    deps.push(activeEffect)
  }
  //让_effect实例记住对应的key
  activeEffect.deps.push(deps)
}
export function trigger(target,key,value){
   //数据更改,找到对应的key收集的_effect实例
   let depsMap = targetMap.get(target)
   if(!depsMap){
     //不存在,说明之前副作用函数中没有使用过这个属性,则这个属性改变不需要重现刷新页面
     return ;
   }
   let effects = depsMap.get(key)
  triggerEffects(effects)
}

export function triggerEffects(effects){
   //依次执行
   if(effects){
    effects.forEach(effect=>effect.run())
  }
}

以上实现了一个简单的响应式模块,但是在实际使用中,依然会暴漏出很多问题,在Vue3源码中,做了很多hook的问题处理,这里我们只讲述其简单的逻辑,很一些比较常见的问题。

  • 问题一: effect嵌套,导致指针丢失

根据我们的逻辑,假设老六写了以下代码:

 import { reactive,effect } from './reactivity.esm.js'
    const obj = {
      name:'宫本',
      age:18
    }
    const state = reactive(obj)
   
    //传入一个副作用函数
    effect(()=>{
      effect(()=>{
        console.log(state.name)
      })
        console.log(state.age)
    })
    setTimeout(()=>{
      state.age=19
    },1000)

老六写了个effect嵌套,这种在vue中很常见,我们很自然可以想到组件嵌套,后面state.age改变,却不输出任何东西,这是什么原因呢?

说一下vue3响应式原理?可不止只有proxy

我们按照之前响应式的逻辑,逐步分析一下,将外层的eefect设置为e1,内层effect设置为e2,e1创建好,会执行内部的run方法,此时指针指向e1(实际是指向e1内部的响应式类实例,这里简短的说),然后执行传入的副作用函数,副作用函数内部按顺序执行,会先执行e2,e2创建后执行e2内部的run函数,指针指向e2,然后执行e2内部副作用函数,触发stata.name的依赖收集,name属性收集到e2,然后指针 置空。此时e2执行完后,在e1的副作用函数中继续往下执行,执行到state.age的触发,由于此时指针为空,无法进行依赖收集,所以后面修改state.age,不会进行响应式更新

很明显,这种情况属于内部的指针改掉了外部的指针,然后内部使用完成之后,外部指针没有复原。早期的vue解决方案是通过一个栈来存储指针,指针切换通过入栈出栈的方式来实现。还有一种方案,是在内部创建一个parent指针,记录其外层指针,结束之后将指针重新指向其parent

 public active = true
  public parent = undefined
  public deps=[]
  constructor(public fn){
  }
  run(){
    if(!this.active){
      //直接执行函数,不进行后面的依赖收集
      return this.fn()
    }
    try {
      this.parent = activeEffect
      activeEffect = this
      return this.fn()
    }finally{
      //执行完之后,让指针置空
      activeEffect = this.parent
      this.parent = undefined
    }
  }
  • 问题二: 代理的数据是多层对象

对于proxy创建的实例,我们只是对传入的对象的第一层属性做了代理,但是如果属性值还是一个对象,则不会被代理,对此,在get操作中,应该对获取的数据再次判断,倘若是对象,则再次代理。这也是一个性能优化的表现,Vue3一开始并不是直接对传入的对象做深层代理,则是当用户访问到某个属性,触发get后,发现它是对象类型,才会对它做代理。换句话说,就是用到这个数据的时候才会处理它。

 get(target,key,receiver){
   if(key === ReactiveFlag.IS_REACTIVE){
     return true
   }
   track(target,key)
   let r = Reflect.get(target,key,receiver)
   if(isObject(r)){
     return reactive(r)
   }
   return r
 },
  • 问题三:vue的分支切换

分支切换关系到属性依赖收集的问题,对于后来不需要的属性,需要把这个属性收集的依赖给清空掉。

 import { reactive,effect } from './reactivity.esm.js'
    const state = reactive({
      flag:true,
      age:18,
      name:'sx'
    })
    effect(()=>{
      document.getElementById('app').innerHTML = state.flag? state.age:state.name
      console.log('sx')
    })
    setTimeout(()=>{
      state.flag = false
      setTimeout(()=>{
        state.age = 19
      },1000)
    },1000)

可以看到,当flag改变。age属性已经和页面没有任何关系,但是改变age,依然会刷新页面,这显然不合理。

分析上述代码属性收集依赖的过程,1.副作用函数fn第一次执行,flag ->effect,age->effect 2. flag改变fn再次执行,flag->effect,name->effect。此时页面数据和age没有关系,但是在第一次fn执行 时,age->effect,因此age改变,依然会执行fn。

xport function triggerEffects(effects){
   //依次执行
   if(effects){
    effects.forEach(effect=>effect.run())
  }
}

可以发现,第2步出了问题,当 属性更新时,会找出属性收集的依赖effect集合,然后执行这个集合的run方法,重新调用fn,由于重新调用fn,所以会进行新的依赖收集,只收集有用到的数据。倘若在执行集合的run方法前,先把集合对应的旧的依赖删除掉(清除age属性影响),然后执行run方法,创建新的依赖(flag->effect;age->effect)不久可以了。

 run(){
    if(!this.active){
      //直接执行函数,不进行后面的依赖收集
      return this.fn()
    }
    try {
      this.parent = activeEffect
      activeEffect = this
      return this.fn()
    }finally{
      //执行完之后,让指针置空
      activeEffect = this.parent
      this.parent = undefined
    }
  }

那么我们只需要在上面的代码里动一下手脚,执行run前,获取effect存储的deps,deps中存储了所有的属性收集的关于当前effect的依赖,依次清除各个属性对当前effect的依赖即可

export function cleanTrack(effect){
  let { deps } = effect
  for(let i = 0;i<deps.length;++i){
    deps[i].delete(effect)
  }
  deps.length = 0
}

我们在run函数中执行fn前调用cleanTrack,清除当前依赖。但是,结果并不理想,页面直接死循环了。

问题还是出在这里

export function triggerEffects(effects){
   //依次执行
   if(effects){
    effects.forEach(effect=>effect.run())
  }
}

effects是一个map类型的集合,effects找到对应的effect执行,effect调用cleanTrack找到对应的deps集合,deps中又找到当前effects,删除effect,然后执行fn,effects又添加这个effect,相当于下面这样。

let test = new Set([1,2])
test.forEach(t=>{
   test.delete(1)
   test.add(1)
})

Set类型的数据遍历时不能删除又添加自己,那么只需要拷贝一份数据,遍历拷贝的数据,操作原有数据即可

export function triggerEffects(deps){
  const effects = [...deps]
   //依次执行
   if(effects){
    effects.forEach(effect=>effect.run())
  }
}

说一下vue3响应式原理?可不止只有proxy

  • 问题四: 副作用函数内部自己调用自己
 import { reactive,effect } from './reactivity.esm.js'
    const state = reactive({
      flag:true,
      age:18,
      name:'sx'
    })
    effect(()=>{
      document.getElementById('app').innerHTML =  state.age++
    })
    

说一下vue3响应式原理?可不止只有proxy

我们分析一下流程为什么会无限调用,首先age++可以拆分为age;age = age+1两步,第一步访问age,age收集当前effect,第二步改变age,触发更新逻辑,执行fn,fn执行age改变,fn再次执行.....无线循环

明白了原因就好办了,我们的目的就是让数据更改一次就行了,后面的执行不需要,也就是避免自调用无限循环。那么我们需要思考一个问题,当fn调用之后,指针指向当前effect,然后触发再次更新,到代码这里.

export function triggerEffects(deps){
  const effects = [...deps]
   //依次执行
   if(effects){
    effects.forEach(effect=>effect.run())
  }
}

此时是上一个fn再执行到这,下一个fn即将执行,那么此时的指针必然是effect,在下一个fn执行的时候

  try {
      this.parent = activeEffect
      activeEffect = this
      cleanTrack(this)
      return this.fn()
    }finally{
      //执行完之后,让指针置空
      activeEffect = this.parent
      this.parent = undefined
    }

这里的this还是这个effect,那么此时activeEffect == this,所以我们只需要添加一层判断,当内部指针和全局指针相同,说明是自调用情况,这种情况取消新一轮的fn执行即可

export function triggerEffects(deps){
  const effects = [...deps]
   //依次执行
   if(effects){
   
    effects.forEach(effect=>{
      if(activeEffect !== effect){
        effect.run()
      }
    })
  }
}

自此,我们基本实现vue的响应式原理