vue中如何进行依赖收集

news/2024/7/19 16:42:34 标签: css, js, vue.js

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

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

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

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

globalData.text = '前端工匠';

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

在这里插入图片描述

收集依赖

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

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

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

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

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


http://www.niftyadmin.cn/n/1371499.html

相关文章

提交表单数据

第一种 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮<input type’submit’> 就可以进行数据的提交&#xff0c;每一个input标签都需要有一个name属性&#xff0c;才能进行提交 <form action’http://www.123.com/postValue’ method’pos…

for in,forEach,for of

for in 什么都可以遍历&#xff08;noodlist会显示原型上的属性&#xff09; for in多用于遍历对象&#xff0c;他会返回对象的属性名而for in不推荐遍历数组 为什么for in不推荐遍历数组 1.for in返回的是每个item的索引如果想对数组的每一项进行操作的话就会很复杂 2.for in…

迭代器,生成器

迭代器 for of不支持遍历普通对象&#xff0c;这里的普通对象指的是没有Symbol.iterator属性的对象。 当使用for of去遍历某一个数据结构的时候&#xff0c;首先去找Symbol.iterator&#xff0c;找到了就去遍历&#xff0c;没有找到的话不能遍历 对象的Symbol.iterator属性&am…

http知识点2

HTTP有哪些方法&#xff1f; HTTP1.0定义了三种请求方法&#xff1a; GET, POST 和 HEAD方法 HTTP1.1新增了五种请求方法&#xff1a;OPTIONS, PUT, DELETE, TRACE 和 CONNECT GET和POST有什么区别&#xff1f; 数据传输方式不同&#xff1a;GET请求通过URL传输数据&#xff0…

关于兼容问题

IE条件注释法 css 属性前缀法 选择器前缀法 图片来自&#xff1a;https://www.cnblogs.com/applejp/p/4180682.html

内存泄漏js

内存泄漏 就是不用的变量js无法进行垃圾回收 造成内存泄漏的原因 1.意外的全局变量&#xff08;全局变量指挂载在window上面的变量&#xff09; 全局变量的生命周期最长&#xff0c;直到页面关闭前&#xff0c;它都存活着&#xff0c;所以全局变量上的内存一直都不会被回收…

axios-retry可以让一个失败的网络请求再次自动发送n(自定义)次数

axios-retry可以让一个失败的网络请求再次自动发送n(自定义)次数 安装 npm install axios-retry引入 import axiosRetry from axios-retry;使用 axiosRetry(axios, { retries: 3 });图片来自&#xff1a;https://juejin.cn/post/7053471988752318472

nginx反向代理,vue2反向代理,vue3反向代理

正向代理和反向代理 反向代理&#xff08;Reverse Proxy&#xff09;对应的是正向代理&#xff08;Forward Proxy&#xff09;&#xff0c;他们的区别&#xff1a; 正向代理&#xff1a; 一般的访问流程是客户端直接向目标服务器发送请求并获取内容&#xff0c;使用正向代理后…