vue中如何进行依赖收集

您所在的位置:网站首页 vue安装依赖命令 vue中如何进行依赖收集

vue中如何进行依赖收集

2022-05-25 05:39| 来源: 网络整理| 查看: 265

为什么要用依赖收集:其目的在于我们观察数据的属性值发生改变时,可以通知哪些视图层使用了该数据。

我们之所以要观察数据,其目的在于当数据的属性发生变化时,可以通知那些曾经使用了该数据的地方。比如第一例子中,模板中使用了price 数据,当它发生变化时,要向使用了它的地方发送通知。那如果多个Vue实例中共用一个变量,如下面这个例子

let globalData = { text: '浪里行舟' }; let test1 = new Vue({ template: ` {{text}} `, data: globalData }); let test2 = new Vue({ template: ` {{text}} `, data: globalData });

如果我们执行下面这条语句:

globalData.text = '前端工匠';

此时我们需要通知 test1 以及 test2 这两个Vue实例进行视图的更新,我们只有通过收集依赖才能知道哪些地方依赖我的数据,以及数据更新时派发更新。那依赖收集是如何实现的?其中的核心思想就是“事件发布订阅模式”。接下来我们先介绍两个重要角色– 订阅者 Dep和观察者 Watcher

在这里插入图片描述

收集依赖

所谓的依赖,其实就是Watcher。至于如何收集依赖,总结起来就一句话,在getter中收集依赖,在setter中触发依赖。先收集依赖,即把用到该数据的地方收集起来,然后等属性发生变化时,把之前收集好的依赖循环触发一遍就行了。

收集依赖需要为依赖找一个存储依赖的地方,为此我们创建了Dep,它用来收集依赖、删除依赖和向依赖发送消息等。

于是我们先来实现一个订阅者 Dep 类,用于解耦属性的依赖收集和派发更新操作,说得具体点,它的主要作用是用来存放 Watcher

观察者对象。我们可以把Watcher理解成一个中介的角色,数据发生变化时通知它,然后它再通知其他地方

摘抄:https://segmentfault.com/a/1190000019700618



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3