Vue2响应式系统之嵌套

 更新时间:2022年04月12日 20:10:18   作者:windliang  
这篇文章主要介绍了Vue响应式系统之嵌套,我们在开发中肯定存在组件嵌套组件的情况,下文将举例说明情况,需要的小伙伴可以参考一下

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

image-20220402083845476

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

image-20220402083943606

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";

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

  • new Watcher(updateParentComponent);

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

接下来执行 函数。updateParentComponent

  • new Watcher(updateMyComponent);

将 赋值为保存了 函数的 。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();
    }

    /**
     * Evaluate the getter, and re-collect dependencies.
     */
    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

image-20220402093847759

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

image-20220402093937896

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

image-20220402093847759

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

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

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

5、总结

今天这个相对好理解一些,通过栈解决了嵌套调用的情况。

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

相关文章

  • vue中路由跳转的方式有哪些你知道吗

    vue中路由跳转的方式有哪些你知道吗

    这篇文章主要为大家介绍了vue路由跳转的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 将Vue组件库更换为按需加载的方法步骤

    将Vue组件库更换为按需加载的方法步骤

    这篇文章主要介绍了将Vue组件库更换为按需加载的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Vue中添加滚动事件设置的方法详解

    Vue中添加滚动事件设置的方法详解

    这篇文章主要给大家介绍了关于Vue中添加滚动事件设置的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue + element-ui实现简洁的导入导出功能

    vue + element-ui实现简洁的导入导出功能

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI,下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料,需要的朋友可以参考下。
    2017-12-12
  • vue设置默认首页的操作

    vue设置默认首页的操作

    这篇文章主要介绍了vue设置默认首页的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue异步更新机制及$nextTick原理的深入讲解

    Vue异步更新机制及$nextTick原理的深入讲解

    最近在学习一些底层方面的知识,所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点,下面这篇文章主要给大家介绍了关于Vue异步更新机制及$nextTick原理的相关资料,需要的朋友可以参考下
    2022-04-04
  • 深入浅析vue全局环境变量和模式

    深入浅析vue全局环境变量和模式

    这篇文章主要介绍了vue全局环境变量和模式的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue使用better-scroll实现横向滚动的方法实例

    vue使用better-scroll实现横向滚动的方法实例

    这几天研究项目时,看到了 better-scroll 插件,看着感觉功能挺强,这篇文章主要给大家介绍了关于vue使用better-scroll实现横向滚动的相关资料,需要的朋友可以参考下
    2021-06-06
  • vue打包通过image-webpack-loader插件对图片压缩优化操作

    vue打包通过image-webpack-loader插件对图片压缩优化操作

    这篇文章主要介绍了vue打包通过image-webpack-loader插件对图片压缩优化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现div可拖动位置也可改变盒子大小的原理

    vue实现div可拖动位置也可改变盒子大小的原理

    这篇文章主要介绍了vue实现div可拖动位置也可改变盒子大小,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09

最新评论