广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >Vue3的响应式原理是什么
  • 729

0
分享到

Vue3的响应式原理是什么

Vue3 2023-05-24 17:05:46 729人浏览 泡泡鱼
摘要

ProxyProxy这个核心api被vue3的响应式原理所依赖，利用Proxy可以拦截一些对象操作。const obj = { a: 1 }; const p = new Proxy(obj, { get(target, propert

Proxy

Proxy这个核心api被vue3的响应式原理所依赖，利用Proxy可以拦截一些对象操作。

const obj = { a: 1 };
const p = new Proxy(obj, {
  get(target, property, receiver) {
    console.log("get");
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log("set");
    return Reflect.set(target, property, receiver);
  },
  has(target, prop) {
    console.log("has");
    return Reflect.has(target, prop);
  },
  deleteProperty(target, prop) {
    console.log("deleteProperty");
    return Reflect.deleteProperty(target, prop);
  },
});

p.a; // 输出 --> get
p.a = 2; // 输出 --> set
"a" in p; // 输出 --> has
delete p.a; // 输出 --> deleteProperty

如上例子，我们用 Proxy 代理了 Obj 对象的属性访问、属性赋值、in 操作符、delete 的操作，并进行 console.log 输出。

Reflect

Reflect 是与 Proxy 搭配使用的一个 API，当我们劫持了某些操作时，如果需要再把这些操作反射回去，那么就需要 Reflect 这个 API。

由于我们拦截了对象的操作，所以这些操作该有的功能都丧失了，例如，访问属性 p.a 应该得到 a 属性的值，但此时却不会有任何结果，如果我们还想拥有拦截之前的功能，那我们就需要用 Reflect 反射回去。

const obj = { a: 1 };
const p = new Proxy(obj, {
  get(target, property, receiver) {
    console.log("get");
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log("set");
    return Reflect.set(target, property, receiver);
  },
  has(target, prop) {
    console.log("has");
    return Reflect.has(target, prop);
  },
  deleteProperty(target, prop) {
    console.log("deleteProperty");
    return Reflect.deleteProperty(target, prop);
  },
});

举个例子

以下全文我们都会通过这个例子来讲述 Vue3 响应式的原理。

<div id="app"></div>

<script>
  // 创建一个响应式对象
  const state = Reactive({ counter: 1 });

  // 立即运行一个函数，当响应式对象的属性发生改变时重新执行。
  effect(() => {
    document.querySelector("#app").innerhtml = state.counter;
  });

  // 2s 后视图更新
  setTimeout(() => {
    state.counter += 1;
  }, 2000);
</script>

我们用 reactive 创建了一个响应式对象 state，并调用了 effect 方法，该方法接受一个副作用函数，effect 的执行会立即调用副作用函数，并将 state.counter 赋值给 #app.innerHTML；两秒后，state.counter += 1，此时，effect 的副作用函数会重新执行，页面也会变成 2.

内部的执行过程大概如下图所示：

Vue3的响应式原理是什么

  • 调用 reactive() 返回一个 Proxy 代理对象，并劫持对象的 get 与 set 操作

  • 调用 effect() 方法时，会访问属性 state.counter，此时会触发 proxy 的 get 操作。

  • get 方法会调用 track() 进行依赖收集；建立一个对象（state）、属性（counter）、effect 副作用函数的依赖关系；

  • set 方法会调用 trigger() 进行依赖更新；通过对象（state）与属性（coutner）找到对应的 effect 副作用函数，然后重新执行。

reactive

reactive 会返回如下一个 Proxy 对象

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);

      track(target, key); // 收集依赖

      if (isObject(res)) {
        // 如果当前获取的属性值是一个对象，则继续将为此对象创建 Proxy 代理
        return reactive(res);
      }

      return res;
    },

    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(target, key); // 依赖更新
    },
  });
};

effect

let activeEffect;
function effect(fn) {
  const _effect = function reactiveEffect() {
    activeEffect = _effect;
    fn();
  };

  _effect();
}

定义一个全局的 activeEffect 变量，该变量指向当前正在执行的 effect 副作用函数，并将其一直保持更新。effect 为 fn 创建一个内部的副作用函数，然后立即执行，此时会触发对象的 get 操作，调用 track() 方法。

effect(() => {
  // effect 的立即执行会访问 state.counter，触发了对象的 get 操作。
  document.querySelector("#app").innerHTML = state.counter;
});

track

track 会建立一个 对象（state） => 属性（counter） => effect 的一个依赖关系

const targetMap = new WeakMap();
function track(target, key) {
  if (!activeEffect) {
    return;
  }

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }

  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }

  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
  }
}

执行完成成后我们得到一个如下的数据结构：

[ // map 集合
  {
    key: {counter: 1} // state 对象,
    value: [ // map 集合
      {
        key: "counter",
        value: [ // set
          function reactiveEffect() {} // effect 副作用函数
        ],
      }
    ],
  },
];

注意：当我们调用 effect 时，会将当前的副作用函数赋值给全局的 activeEffect，所以此时我们可以正确关联其依赖。

trigger

当我们给 state.counter 赋值的时候就会触发代理对象的 set 操作，从而调用 trigger 方法

setTimeout(() => {
  // 给 counter 属性赋值会触发 set 操作
  state.counter += 1;
}, 2000);
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const effects = depsMap.get(key);
  effects && effects.forEach((effect) => effect());
}

以上就是Vue3的响应式原理是什么的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue3的响应式原理是什么

本文链接: https://www.lsjlt.com/news/217812.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Vue3的响应式原理是什么
    ProxyProxy这个核心API被Vue3的响应式原理所依赖，利用Proxy可以拦截一些对象操作。const obj = { a: 1 }; const p = new Proxy(obj, { get(target, propert...
    99+
    2023-05-24
    Vue3
  • Vue3 Reactive响应式原理是什么
    一、怎么实现变量变化怎么实现变量变化，相关依赖的结果也跟着变化 当原本price=5变为price=20后total应该变为40，但是实际total并不会改变。 解决办法可以这样，当变量改变了，重新计算一次，那么结果就会改变为最新的结果。如...
    99+
    2023-05-21
    Vue3 reactive
  • Vue2/Vue3的响应式原理是什么
    本篇内容主要讲解“Vue2/Vue3的响应式原理是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue2/Vue3的响应式原理是什么”吧!在讲解之前，我们先了解一下数据响应式是什么？所谓数据...
    99+
    2023-07-05
  • vue3响应式原理和api编写的方法是什么
    这篇文章主要讲解了“vue3响应式原理和api编写的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3响应式原理和api编写的方法是什么”吧！前言vue3响应式原理加api编写...
    99+
    2023-06-22
  • 关于Vue3中的响应式原理
    目录一、简介二、响应核心1.核心源码2.逐步分析上述示例代码3.收集依赖和触发依赖更新三、V3.2的响应式优化四、后话一、简介 本章内容主要通过具体的简单示例来分析Vue3是如何实现...
    99+
    2022-11-13
  • 深入理解Vue3响应式原理
    目录响应式原理手写实现1、实现Reactive2、实现依赖的收集和触发effect影响函数收集/添加依赖触发依赖3、移除/停止依赖衍生类型1、实现readonly2、实现shallo...
    99+
    2022-12-19
    vue3响应式原理精讲 vue3 响应式 vue 响应式原理
  • Vue的响应式原理是什么
    本篇内容介绍了“Vue的响应式原理是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Depvar Dep = ...
    99+
    2023-06-20
  • 详解vue3 响应式的实现原理
    目录核心设计思想Vue.js 2.x 响应式Vue.js 3.x 响应式依赖收集：get 函数派发通知：set 函数总结源码参考核心设计思想 除了组件化，Vue.js 另一个核心设计...
    99+
    2022-11-13
  • 详解Vue3的响应式原理解析
    目录Vue2响应式原理回顾Vue3响应式原理剖析嵌套对象响应式避免重复代理总结 Vue2响应式原理回顾 // 1.对象响应化：遍历每个key，定义getter、setter //...
    99+
    2022-11-12
  • 如何解析Vue3的响应式原理
    本篇文章给大家分享的是有关如何解析Vue3的响应式原理，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。Vue2响应式原理回顾// 1.对象响应化：遍历每个key，定义g...
    99+
    2023-06-22
  • vue响应式原理是什么
    Vue 的响应式原理是通过数据劫持（Object.defineProperty）实现的，其核心思想是将数据模型和视图模型进行双向绑定...
    99+
    2023-05-13
    vue响应式原理 vue
  • Vue3响应式原理实例分析
    本篇内容介绍了“Vue3响应式原理实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！回顾 vue2.x 的响应式实现原理：对象类型：通过...
    99+
    2023-07-02
  • 一文详解Vue3响应式原理
    目录回顾 vue2.x 的响应式vue3的响应式回顾 vue2.x 的响应式 实现原理： 对象类型：通过object.defineProperty()对属性的读取、修改进行拦截（数据...
    99+
    2022-11-13
  • vue3 reactive响应式依赖收集派发更新原理是什么
    proxyvue3已经从Object.property更换成Proxy，Proxy相比于前者可以直接监听对象数组，对于深层次的对象和数组，会把触发对应getter，然后去递归进行依赖收集，并不是直接像vue2暴力那样递归，总体而言性能更好对...
    99+
    2023-05-16
    Vue3 reactive
  • Vue.js中响应式的原理是什么
    今天就跟大家聊聊有关Vue.js中响应式的原理是什么，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。关于Vue.jsVue.js是一款MVVM框架，上...
    99+
    2022-10-19
  • 一文详解Vue2/Vue3的响应式原理
    this.$delete(this.student, 'name');// 删除student对象属性name this.$set(this.student, 'age', '21');// ...
    99+
    2023-05-14
    Vue.js
  • Vue中响应式原理是什么
    这篇文章主要介绍“Vue中响应式原理是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中响应式原理是什么”文章能帮助大家解决问题。响应式在日常开发中的应用是很常见的，这里举个简单的例子：le...
    99+
    2023-07-05
  • Vue3 Reactive响应式原理逻辑详解
    目录前言一、怎么实现变量变化二、怎么实现变量变化三、将多个dep存储在Map中四、将多个object的depsMap继续存储起来五、核心六、源码解析（TypeScript）前言 本篇...
    99+
    2022-11-13
  • Vue3中响应式的特殊处理方法是什么
    本篇内容介绍了“Vue3中响应式的特殊处理方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！vue2 vs vue3两个响应式更新的核...
    99+
    2023-07-06
  • vue2.0/3.0中响应式的原理是什么
    本篇文章为大家展示了vue2.0/3.0中响应式的原理是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框...
    99+
    2023-06-15
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作