Vue.js 源码学习笔记 - 细节
1. this._eventsCount = { } 这是为了避免不必要的深度遍历:
在有广播事件到来时,如果当前 vm 的 _eventsCount 为 0,
则不必向其子 vm 继续传播该事件。
2.
数据更新的diff机制
视图更新效率的焦点问题: 大列表的更新 和 深层数据更新
而大列表较为常见
repeat.js
首先diff(data, oldVms) 大概是先比较 新旧两个列表 的vm的数据状态, 然后
差量更新DOM
步骤:
1.遍历 新列表里的 每一项, 如果 该项的vm 之前就存在, 则标记为 _reused
如果不存在对应的vm, 则创建一个新的
(这个vm 个人理解是每个列表每一行数据都有个独立的vm , 存在意思是新列表数据也和vm的数据一样 )
2. 遍历旧列表的每一项, 如果这一项对应对的vm没有被标记为 _reused,
说明新列表不需要利用这个vm, 就马上销毁它
3. 根据新列表item顺序, 整理 新的vm在视图 和 _reused的vm 顺序,
列表更新完成
Vue.js 源码学习笔记 - 细节的更多相关文章
- Vue.js 源码学习笔记
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器
主体 实例方法归类: 先看个作者推荐, 清晰易懂的 23232 简易编译器 重点: 最简单的订阅者模式 // Observer class Observer { constructor (d ...
- Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty
解析神奇的 Object.defineProperty 几行代码看他怎么用 var a= {} Object.defineProperty( a, "b", { value ...
- Underscore.js 源码学习笔记(下)
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- Underscore.js 源码学习笔记(上)
版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行 ...
- vue.js源码学习分享(一)
今天看了vue.js源码 发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换 ...
- AlloyTouch.js 源码 学习笔记及原理说明
alloyTouch这个库其实可以做很多事的, 比较抽象, 需要我们用户好好的思考作者提供的实例属性和一些回调方法(touchStart, change, touchMove, pressMove, ...
- move.js 源码 学习笔记
源码笔记: /* move.js * @author:flfwzgl https://github.com/flfwzgl * @copyright: MIT license * Sorrow.X - ...
- lazy-load-img.js 源码 学习笔记及原理说明
lazy-load-img.js? 1. 什么鬼? 一个轻量级的图片懒加载,我个人很是喜欢. 2. 有什么优势? 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图 ...
随机推荐
- Java filter中的chain.doFilter详解
转载: 一.chain.doFilter作用 1.一般filter都是一个链,web.xml 里面配置了几个就有几个.一个一个的连在一起 request -> filter1 -> fil ...
- Netty原理剖析
1. Netty简介 Netty是一个高性能.异步事件驱动的NIO框架,基于JAVA NIO提供的API实现.它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作 ...
- UVa 12563 劲歌金曲(0-1背包)
https://vjudge.net/problem/UVA-12563 题意: 在一定的时间内连续唱歌,最后一首唱11分钟18秒的劲歌金曲,问最多能长多长时间. 思路: 0-1背包问题,背包容量为t ...
- 在SSM框架中,multfile转file
import org.apache.commons.fileupload.disk.DiskFileItem; import org.springframework.web.multipart.Mul ...
- redis nginx session tomcat
Redis解决session共享 http://lyl-zsu.iteye.com/blog/2408292 http://zx10103326.iteye.com/blog/2244195 http ...
- selenium-webdriver 简单教程
ruby环境下selenium/webdriver可以通过selenium-webdriver.gem包进行安装 gem install selenium-webdriver 支持语言及版本有ru ...
- [设计模式][c++]状态切换模式
转自:http://blog.csdn.net/yongh701/article/details/49154439 状态模式也是设计模式的一种,这种设计模式思想不复杂,就是实现起来的代码有点复杂.主要 ...
- 附加题找bug
private: void ReSize(int sz) { ) { return; } if(maxSize != sz) { T *arr = new T[sz]; if(arr == NULL) ...
- VMware 怎么判断哪台机子试图用混杂模式且不成功
主要是看个log, 然后推断虚拟端口号 The VMkernel logs at /var/log/vmkernel or /var/log/messages contain entries simi ...
- Python的第二次作业
羊车门问题 1.我认为 会 增加选中汽车的机会,原因如下: 不换的情况:对于参赛者而言无论选哪一扇门都有1/3的几率能获得车子. 换的情况 :对于参赛者而言,有两种情况「1.参赛者第一次就选择到了正 ...