Vue3响应式基本原理

一、基本概念:响应式数据和副作用函数

1.副作用函数

副作用函数:在执行过程中会影响到其他函数的执行(产生副作用)。 比如设置body文本的内容:

js 复制代码
function effect() {  
    document.body.innerText = 'hello vue3'
}

当body文本内容被改变时,可能会有其它使用到body文本的函数会受到影响。

2.响应式数据

响应式数据:在副作用函数中使用的的值,当其变化时,可以触发副作用函数重新执行。若此时改变obj.text的值副作用函数effect()能够自动重新执行,则其为响应式数据。

js 复制代码
const obj = { text: 'hello world' } 
function effect() { 
    document.body.innerText = obj.text
 }

二、响应式数据的基本实现

1.思路:

通过对副作用函数和响应式数据的了解可知,为了实现响应式,我们需要:

1.在数据被读取时 ,保存相对应的副作用函数。

2.在数据变化时 ,将保存的副作用函数取出并执行。

2.如何对数据的读取和设置操作进行拦截呢?

Vue2中,使用的是Object.defineProperty函数实现的。Vue3则采用了ES6中新增的代理对象Proxy实现。

3.Proxy:

proxy的基础用法如下:

js 复制代码
let p = new Proxy(target, handler);
  • target:被代理的目标对象。
  • handler:一个对象,定义了代理对象的行为。

为了拦截数据的读取和变化操作,我们需要在handler对象中进行相应的定义:

  • get(target, property, receiver):拦截对象属性的读取操作。
  • set(target, property, value, receiver):拦截对象属性的设置操作。

其中:
target为被代理的对象
property为被代理对象的属性名
receiver为代理后的proxy实例,这里为p

具体使用为:

js 复制代码
let p = new Proxy(data, {
  // 拦截读取操作
  get(target, key) {
      ...
    return target[key]
  },
  // 拦截设置操作
  set(target, key, newVal) {
    ...
  }
})

4.简单实现:

将数据使用Proxy代理,并在拦截函数中进行副作用函数的存取操作,为了避免重复的收集副作用函数,使用Set数据类型存储。

js 复制代码
// 定义存储副作用函数的容器
const bucket = new Set()

// 原始数据
const data = { text: 'hello world' }

// 对原始数据的代理
const obj = new Proxy(data, {
  // 拦截读取操作
  get(target, key) {
    // 将副作用函数 effect 添加到存储副作用函数的容器中
    bucket.add(effect)
    // 返回属性值
    return target[key]
  },
  // 拦截设置操作
  set(target, key, newVal) {
    // 设置属性值
    target[key] = newVal
    // 把副作用函数从容器里取出并执行
    bucket.forEach(fn => fn())
  }
})
相关推荐
web打印社区3 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗3 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长3 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅4 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_4 小时前
Chrome开发者工具
前端·chrome
YiHanXii4 小时前
this 输出题
前端·javascript·1024程序员节
楊无好5 小时前
React中ref
前端·react.js
程琬清君5 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1005 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔665 小时前
flutter实现web端实现效果
前端·flutter