广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue2响应式系统介绍
  • 530

0
分享到

Vue2响应式系统介绍

2024-04-02 19:04:59 530人浏览 薄情痞子
摘要

目录一、响应式系统要干什么二、响应式数据三、保存当前正在执行的函数四、响应式数据五、Observer 对象六、测试七、总结前言： 目前工作中大概有 的需求是在用 

前言：

目前工作中大概有 的需求是在用 的技术栈，所谓知其然更要知其所以然，为了更好的使用 、更快的排查问题，最近学习了源码相关的一些知识，虽然网上总结 的很多很多了，不少自己一个，但也不多自己一个，欢迎一起讨论学习，发现问题欢迎指出。40%Vue2VueVue

一、响应式系统要干什么

回到最简单的代码：

data = {
    text: 'hello, world'
}

const updateComponent = () => {
    console.log('收到', data.text);
}

updateComponent()

data.text = 'hello, liang'
// 运行结果
// 收到 hello, world

响应式系统要做的事情：某个依赖了 数据的函数，当所依赖的 数据改变的时候，该函数要重新执行。datadata

我们期望的效果：当上边 修改的时候， 函数再执行一次。data.textupdateComponent

为了实现响应式系统，我们需要做两件事情：

  • 知道 中的数据被哪些函数依赖data
  • data中的数据改变的时候去调用依赖它的函数们

为了实现第 点，我们需要在执行函数的时候，将当前函数保存起来，然后在读取数据的时候将该函数保存到当前数据中。1

第 点就迎刃而解了，当修改数据的时候将保存起来的函数执行一次即可。2

在读取数据和修改数据的时候需要做额外的事情，我们可以通过 重写对象属性的 和 函数。Object.defineProperty()getset

二、响应式数据

我们来写一个函数，重写属性的 和 函数。getset


export function defineReactive(obj, key, val) {
    const property = Object.getOwnPropertyDescriptor(obj, key);
    // 读取用户可能自己定义了的 get、set
    const getter = property && property.get;
    const setter = property && property.set;
    // val 没有传进来话进行手动赋值
    if ((!getter || setter) && arguments.length === 2) {
        val = obj[key];
    }

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            const value = getter ? getter.call(obj) : val;
            
            // 1.这里需要去保存当前在执行的函数
            
            return value;
        },
        set: function reactiveSetter(newVal) {
            const value = getter ? getter.call(obj) : val;

            if (setter) {
                setter.call(obj, newVal);
            } else {
                val = newVal;
            }
            
            // 2.将依赖当前数据依赖的函数执行
            
        },
    });
}

为了调用更方便，我们把第 步和第 步的操作封装一个 类。12Dep

export default class Dep {
    static target; //当前在执行的函数
    subs; // 依赖的函数
    constructor() {
        this.subs = []; // 保存所有需要执行的函数
    }

    addSub(sub) {
        this.subs.push(sub);
    }

    depend() {
        // 触发 get 的时候走到这里
        if (Dep.target) {
            // 委托给 Dep.target 去调用 addSub
            Dep.target.aDDDep(this);
        }
    }

    notify() {
        for (let i = 0, l = this.subs.length; i < l; i++) {
            this.subs[i].update();
        }
    }
}

Dep.target = null; // 静态变量，全局唯一

我们将当前执行的函数保存到 类的 变量上。Deptarget

三、保存当前正在执行的函数

为了保存当前的函数，我们还需要写一个 类，将需要执行的函数传入，保存到 类中的 属性中，然后交由 类负责执行。WatcherWatchergetterWatcher

这样在 类中， 中保存的就不是当前函数了，而是持有当前函数的 对象。DepsubsWatcher

import Dep from "./dep";
export default class Watcher {
    constructor(Fn) {
        this.getter = Fn;
        this.get();
    }

    
    get() {
        Dep.target = this; // 保存包装了当前正在执行的函数的 Watcher
        let value;
        try {
          	// 调用当前传进来的函数，触发对象属性的 get
            value = this.getter.call();
        } catch (e) {
            throw e;
        }
        return value;
    }

    
    addDep(dep) {
      	// 触发 get 后会走到这里，收集当前依赖
        // 当前正在执行的函数的 Watcher 保存到 dep 中的 subs 中
        dep.addSub(this);
    }

    
  	// 修改对象属性值的时候触发 set，走到这里
    update() {
        this.run();
    }

    
    run() {
        this.get();
    }
}

Watcher 的作用就是将正在执行的函数通过 包装后保存到 中，然后调用传进来的函数，此时触发对象属性的 函数，会收集当前 。WatcherDep.targetgetWatcher

如果未来修改对象属性的值，会触发对象属性的 ，接着就会调用之前收集到的 对象，通过 对象的 方法，来调用最初执行的函数。setWatcherWatcheruptate

四、响应式数据

回到我们之前没写完的 函数，按照上边的思路，我们来补全一下。defineReactive

import Dep from "./dep";

export function defineReactive(obj, key, val) {
    const property = Object.getOwnPropertyDescriptor(obj, key);
    // 读取用户可能自己定义了的 get、set
    const getter = property && property.get;
    const setter = property && property.set;
    // val 没有传进来话进行手动赋值
    if ((!getter || setter) && arguments.length === 2) {
        val = obj[key];
    }

    
    const dep = new Dep(); // 持有一个 Dep 对象，用来保存所有依赖于该变量的 Watcher
    

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            const value = getter ? getter.call(obj) : val;
            
            // 1.这里需要去保存当前在执行的函数
            if (Dep.target) {
                dep.depend();
            }
            
            return value;
        },
        set: function reactiveSetter(newVal) {
            const value = getter ? getter.call(obj) : val;

            if (setter) {
                setter.call(obj, newVal);
            } else {
                val = newVal;
            }
            
            // 2.将依赖当前数据依赖的函数执行
            dep.notify();
            
        },
    });
}

五、Observer 对象

我们再写一个 方法，把对象的全部属性都变成响应式的。Observer

export class Observer {
    constructor(value) {
        this.walk(value);
    }

    
    walk(obj) {
        const keys = Object.keys(obj);
        for (let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i]);
        }
    }
}

我们提供一个 方法来负责创建 对象。observeObserver

export function observe(value) {
    let ob = new Observer(value);
    return ob;
}

六、测试

将上边的方法引入到文章最开头的例子，来执行一下：

import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
    text: "hello, world",
};
// 将数据变成响应式的
observe(data);

const updateComponent = () => {
    console.log("收到", data.text);
};

// 当前函数由 Watcher 进行执行
new Watcher(updateComponent);

data.text = "hello, liang";

此时就会输出两次了~

收到 hello, world
收到 hello, liang

说明我们的响应式系统成功了。

七、总结

image-20220329092722630

先从整体理解了响应式系统的整个流程：

每个属性有一个 数组， 会持有当前执行的函数，当读取属性的时候触发 ，将当前 保存到 数组中，当属性值修改的时候，再通过 数组中的 对象执行之前保存的函数。subsWatchergetWatchersubssubsWatcher

到此这篇关于Vue2响应式系统介绍的文章就介绍到这了,更多相关Vue2响应式系统内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

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

--结束END--

本文标题: Vue2响应式系统介绍

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

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

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

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

下载Word文档
去做题
猜你喜欢
  • Vue2响应式系统介绍
    目录一、响应式系统要干什么二、响应式数据三、保存当前正在执行的函数四、响应式数据五、Observer 对象六、测试七、总结前言： 目前工作中大概有 的需求是在用 ...
    99+
    2022-11-13
  • Vue2 响应式系统之深度响应
    目录1、场景2、方案3、场景24、总结1、场景 import { observe } from "./reactive"; import Watcher from "./watche...
    99+
    2022-11-13
  • Vue2响应式系统之嵌套
    目录1、场景2、执行过程3、修复4、测试5、总结1、场景 在 开发中肯定存在组件嵌套组件的情况，类似于下边的样子。Vue <!-- parent-component ...
    99+
    2022-11-13
  • Vue2 响应式系统之数组
    目录1、场景2、场景 23、方案3、收集依赖代码实现4、通知依赖代码实现5、测试6、总结本文接Vue2响应式系统 、Vue2 响应式系统之分支切换  ，...
    99+
    2022-11-13
  • Vue2响应式系统之set和delete
    目录1、数组集2、数组 del3、对象 set4、对象 del5、总结1、数组集 import { observe } from "./reactive"; import Watch...
    99+
    2022-11-13
  • Vue2响应式系统有什么用
    这篇文章主要讲解了“Vue2响应式系统有什么用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue2响应式系统有什么用”吧！一、响应式系统要干什么回到最简单的代码：data =&n...
    99+
    2023-06-30
  • Vue2 响应式系统之异步队列
    目录场景解决方案代码实现执行结果总结试想一下如果这里的 console.log 是渲染页面，那改变一次值就刷新一下页面，会造成严重的性能问题，页面也会不停的改变。 场景 import...
    99+
    2022-11-13
  • Vue2 响应式系统之分支切换
    目录场景observer(data)new Watcher(updateComponent)data.ok = falsedata.text = "hello, ...
    99+
    2022-11-13
  • Vue2响应式系统之深度响应怎么实现
    本文小编为大家详细介绍“Vue2响应式系统之深度响应怎么实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue2响应式系统之深度响应怎么实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。1、场景import&...
    99+
    2023-06-30
  • Vue2响应式系统之set和delete怎么用
    今天小编给大家分享一下Vue2响应式系统之set和delete怎么用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。...
    99+
    2023-06-30
  • Vue2响应式系统之嵌套怎么实现
    这篇“Vue2响应式系统之嵌套怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue2响应式系统之嵌套怎么实现”文章吧...
    99+
    2023-06-30
  • Vue2响应式系统之怎么让数组生效
    这篇文章主要介绍了Vue2响应式系统之怎么让数组生效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue2响应式系统之怎么让数组生效文章都会有所收获，下面我们一起来看看吧。1、场景import {&n...
    99+
    2023-06-30
  • Vue2响应式系统之异步队列怎么实现
    这篇“Vue2响应式系统之异步队列怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue2响应式系统之异步队列怎么实现...
    99+
    2023-06-30
  • Vue2响应式系统之分支切换怎么实现
    本篇内容介绍了“Vue2响应式系统之分支切换怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！场景我们考虑一下下边的代码会输出什么。im...
    99+
    2023-06-30
  • vue2响应式的缺点影响
    前言： 响应式：数据改变-->视图跟着变 对象新增的属性没有响应式 数组的部分操作没有响应式    push()，pop()，shift()，unshift...
    99+
    2022-11-13
  • html5响应式布局的详细介绍
    本篇内容主要讲解“html5响应式布局的详细介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5响应式布局的详细介绍”吧!一、什么是响应式布局 ...
    99+
    2022-10-19
  • vue视图响应式更新详细介绍
    目录概述思路第一步统一封装更新函数第二步监听并触发视图更新引入Dep管家实现下语法糖v-model概述 前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化，但是当数据变化...
    99+
    2022-11-13
  • CentOS系统单用户模式介绍
    这篇文章主要介绍“CentOS系统单用户模式介绍”，在日常操作中，相信很多人在CentOS系统单用户模式介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CentOS系统单用户模式介绍”的疑惑有所帮助！接下来...
    99+
    2023-06-16
  • vue2实现provide inject传递响应式
    1. vue2 中的常规写法 // 父级组件提供 'foo' var Provider = { data(){ return { foo: 'bar' ...
    99+
    2022-11-12
  • SpringMVC数据响应详细介绍
    目录一、环境准备二、响应页面[了解]三、返回文本数据[了解]四、响应JSON数据SpringMVC接收到请求和数据后，进行一些了的处理，当然这个处理可以是转发给Service，Ser...
    99+
    2023-02-06
    SpringMVC数据响应 SpringMVC响应
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作