vue.js 依赖收集
说明
【本文转载自:https://github.com/answershuto/learnVue】
为什么要依赖收集
先看下面这段代码
new Vue({template: `<div><span>text1:</span> {{text1}}<span>text2:</span> {{text2}}<div>`,data: {text1: 'text1',text2: 'text2',text3: 'text3'}
});
按照之前《响应式原理》中的方法进行绑定则会出现一个问题——text3在实际模板中并没有被用到,然而当text3的数据被修改(this.text3 = ‘test’)的时候,同样会触发text3的setter导致重新执行渲染,这显然不正确。
先说说Dep
当对data上的对象进行修改值的时候会触发它的setter,那么取值的时候自然就会触发getter事件,所以我们只要在最开始进行一次render,那么所有被渲染所依赖的data中的数据就会被getter收集到Dep的subs中去。在对data中的数据进行修改的时候setter只会触发Dep的subs的函数。
定义一个依赖收集类Dep。
class Dep {constructor () {this.subs = [];}addSub (sub: Watcher) {this.subs.push(sub)}removeSub (sub: Watcher) {remove(this.subs, sub)}/*Github:https://github.com/answershuto*/notify () {// stabilize the subscriber list firstconst subs = this.subs.slice()for (let i = 0, l = subs.length; i < l; i++) {subs[i].update()}}
}
function remove (arr, item) {if (arr.length) {const index = arr.indexOf(item)if (index > -1) {return arr.splice(index, 1)}}
}
Watcher
订阅者,当依赖收集的时候会addSub到sub中,在修改data中数据的时候会触发dep对象的notify,通知所有Watcher对象去修改对应视图。
class Watcher {constructor (vm, expOrFn, cb, options) {this.cb = cb;this.vm = vm;/*在这里将观察者本身赋值给全局的target,只有被target标记过的才会进行依赖收集*/Dep.target = this;/*Github:https://github.com/answershuto*//*触发渲染操作进行依赖收集*/this.cb.call(this.vm);}update () {this.cb.call(this.vm);}
}
开始依赖收集
class Vue {constructor(options) {this._data = options.data;observer(this._data, options.render);let watcher = new Watcher(this, );}
}function defineReactive (obj, key, val, cb) {/*在闭包内存储一个Dep对象*/const dep = new Dep();Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{if (Dep.target) {/*Watcher对象存在全局的Dep.target中*/dep.addSub(Dep.target);}},set:newVal=> {/*只有之前addSub中的函数才会触发*/dep.notify();}})
}Dep.target = null;
将观察者Watcher实例赋值给全局的Dep.target,然后触发render操作只有被Dep.target标记过的才会进行依赖收集。有Dep.target的对象会将Watcher的实例push到subs中,在对象被修改触发setter操作的时候dep会调用subs中的Watcher实例的update方法进行渲染。
vue.js 依赖收集相关推荐
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点?
来自:开源中国 协作翻译 链接:oschina.net/translate/web-frameworks-conclusions 原文:sitepen.com/blog/2017/11/10/web- ...
- Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点
在这篇文章中,我们将对这个系列中所提到的每款框架做一个总结,包括我们所认为的强项和弱项.另外,我们为你留下了一些值得思考的问题. 我是否需要使用框架? 如果不尝试回答这个问题就是我们的失职,这越来越成 ...
- js去掉前后空格的函数_2020年最火爆的Vue.js面试题
2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识--理论篇 1.对于Vue是一套渐进式框架的理解 渐进式代表的含义是:主张最少. Vue可能有些方面是不如R ...
- 经典文摘:饿了么的 PWA 升级实践(结合Vue.js)
自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作.直到近日在 Google I/O 2017 上登台亮相,才终于算 ...
- Vue.js组件化开发实践
Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
- vue 3.0和2.0区别_一文看懂 Vue.js 3.0 的优化
Vue.js 从 1.x 到 2.0 版本,最大的升级就是引入了虚拟 DOM 的概念,它为后续做服务端渲染以及跨端框架 Weex 提供了基础. Vue.js 2.x 发展了很久,现在周边的生态设施都已 ...
- vue事件总线_[面试] 聊聊你对 Vue.js 框架的理解
作者:yacan8 https://github.com/yacan8/blog/issues/26 本文为一次前端技术分享的演讲稿,所以尽力不贴 Vue.js 的源码,因为贴代码在实际分享中,比较枯 ...
- vue.js的使用总结
最近公司要求使用vue.js开发一款PC端的应用,大约用时4个月完成,在此之前只是了解过vue.js,在项目完成后对vuejs的相关内容也有了大致的了解,为了加强自身的记忆,对vue的相关知识进行总结 ...
最新文章
- mac电脑抹掉数据要多久_macbook怎么抹掉所有的数据?
- 计算机没考好检讨,考试没考好检讨书范文(精选6篇)
- SpringBoot微信公众号授权访问认证文件部署
- Python通过代理ip访问网站
- Lamp安装与实现动态网页案例(一)
- 缓存面试 - 为什么要用缓存?缓存使用不当会造成什么后果?
- 叮叮叮 重点之中的python必备英语单词(1)来啦!请记得查收
- rsa前后端加密流程_不懂前后端分离?这篇就够了
- C语言转义字符介绍和示例
- 20110123 - 调试时IDE的匪夷所思行为
- 又一可获Linux、Unix根权限的漏洞曝出
- 软件测试黑盒用例文档,软件测试黑盒白盒测试用例.pdf
- AIR SDK 更新方法
- ie6中margin失效问题
- CMMI3认证升级CMMI5认证需满足的基本条件
- 华硕笔记本禁用触控板方法
- 散文是指以文字为创作、审美对象的文学艺术体裁
- SQL Server 2000个人版的安装
- 罗丹明PEG罗丹明,RB-PEG-RB
- 洛谷_2762 太空飞行计划问题