文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue2响应式系统之嵌套怎么实现

2023-06-30 00:51

关注

这篇“Vue2响应式系统之嵌套怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue2响应式系统之嵌套怎么实现”文章吧。

1、场景

在 开发中肯定存在组件嵌套组件的情况,类似于下边的样子。Vue

<!-- parent-component --><div>  <my-component :text="inner"></my-component>  {{ text }}<div><!-- my-component--><div>{{ text }}</div>

回到我们之前的响应式系统,模拟一下上边的情况:

import { observe } from "./reactive";import Watcher from "./watcher";const data = {    text: "hello, world",    inner: "内部",};observe(data);const updateMyComponent = () => {    console.log("子组件收到:", data.inner);};const updateParentComponent = () => {    new Watcher(updateMyComponent);    console.log("父组件收到:", data.text);};new Watcher(updateParentComponent);data.text = "hello, liang";

可以先 分钟考虑一下上边输出什么?1

首先回忆一下 会做什么操作。new Watcher

第一步是保存当前函数,然后执行当前函数前将全局的 赋值为当前 对象。Dep.targetWatcher

Vue2响应式系统之嵌套怎么实现

接下来执行 函数的时候,如果读取了相应的属性就会触发 ,从而将当前 收集到该属性的 中。gettergetWatcherDep

Vue2响应式系统之嵌套怎么实现

2、执行过程

import { observe } from "./reactive";import Watcher from "./watcher";const data = {    text: "hello, world",    inner: "内部",};observe(data);const updateMyComponent = () => {    console.log("子组件收到:", data.inner);};const updateParentComponent = () => {    new Watcher(updateMyComponent);    console.log("父组件收到:", data.text);};new Watcher(updateParentComponent);data.text = "hello, liang";

我们再一步一步理清一下:

将 赋值为保存了 函数的 。Dep.targetupdateParentComponentWatcher

接下来执行 函数。updateParentComponent

将 赋值为保存了 函数的 。Dep.targetupdateMyComponentWatcher

接下来执行 函数。updateMyComponent

const updateMyComponent = () => {    console.log("子组件收到:", data.inner);};// 读取了 inner 变量。// data.inner 的 Dep 收集当前 Watcher(保存了 `updateMyComponent` 函数)
const updateParentComponent = () => {    new Watcher(updateMyComponent);    console.log("父组件收到:", data.text);};// 读取了 text 变量。// data.text 的 Dep 收集当前 Watcher (保存了 `updateMyComponent` 函数)

data.text = "hello, liang";

触发 的 函数,执行它依赖的 ,而此时是 函数。textsetWatcherupdateMyComponent

所以上边代码最终输出的结果是:

子组件收到: 内部  // new Watcher(updateMyComponent); 时候输出
父组件收到: hello, world // new Watcher(updateParentComponent); 时候输出
子组件收到: 内部 // data.text = "hello, liang"; 输出

然而子组件并不依赖 ,依赖 的父组件反而没有执行。data.textdata.text

3、修复

上边的问题出在我们保存当前正在执行 时候使用的是单个变量 。WatcherDep.target = null; // 静态变量,全局唯一

回忆一下学习 语言或者汇编语言的时候对函数参数的处理:C

function b(p) {    console.log(p);}function a(p) {    b("child");    console.log(p);}a("parent");

当函数发生嵌套调用的时候,执行 函数的时候我们会先将参数压入栈中,然后执行 函数,同样将参数压入栈中, 函数执行完毕就将参数出栈。此时回到 函数就能正确取到 参数的值了。abbap

对应于 的收集,我们同样可以使用一个栈来保存,执行函数前将 压入栈,执行函数完毕后将 弹出栈即可。其中, 始终指向栈顶 ,代表当前正在执行的函数。WatcherWatcherWatcherDep.targetWatcher

回到 代码中,我们提供一个压栈和出栈的方法。Dep

import { remove } from "./util";let uid = 0;export default class Dep {    ... 省略}Dep.target = null; // 静态变量,全局唯一// The current target watcher being evaluated.// This is globally unique because only one watcher// can be evaluated at a time.const targetStack = [];export function pushTarget(target) {    targetStack.push(target);    Dep.target = target;}export function popTarget() {    targetStack.pop();    Dep.target = targetStack[targetStack.length - 1]; // 赋值为栈顶元素}

然后 中,执行函数之前进行入栈,执行后进行出栈。Watcher

import { pushTarget, popTarget } from "./dep";export default class Watcher {    constructor(Fn) {        this.getter = Fn;        this.depIds = new Set(); // 拥有 has 函数可以判断是否存在某个 id        this.deps = [];        this.newDeps = []; // 记录新一次的依赖        this.newDepIds = new Set();        this.get();    }        get() {              pushTarget(this); // 保存包装了当前正在执行的函数的 Watcher               let value;        try {            value = this.getter.call();        } catch (e) {            throw e;        } finally {                      popTarget();                      this.cleanupDeps();        }        return value;    }   ...}

4、测试

回到开头的场景,再来执行一下:

import { observe } from "./reactive";import Watcher from "./watcher";const data = {    text: "hello, world",    inner: "内部",};observe(data);const updateMyComponent = () => {    console.log("子组件收到:", data.inner);};const updateParentComponent = () => {    new Watcher(updateMyComponent);    console.log("父组件收到:", data.text);};new Watcher(updateParentComponent);data.text = "hello, liang";

执行 的时候将 入栈。new Watcher(updateParentComponent);Watcher

Vue2响应式系统之嵌套怎么实现

进入 函数,执行 的时候将 入栈。updateParentComponentnew Watcher(updateMyComponent);Watcher

Vue2响应式系统之嵌套怎么实现

执行 函数, 收集当前 ,执行完毕后 出栈。updateMyComponentdata.innerDep.targetWatcher

Vue2响应式系统之嵌套怎么实现

继续执行 函数, 收集当前 。updateParentComponentdata.textDep.target

此时依赖就变得正常了, 会触发 函数,从而输出如下:data.textupdateParentComponent

子组件收到: 内部
父组件收到: hello, world
子组件收到: 内部
父组件收到: hello, liang

以上就是关于“Vue2响应式系统之嵌套怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯