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.支持将各种宽高不一致的图片,自动剪切成默认图 ...
随机推荐
- [JVM] - 一份<自己动手写Java虚拟机>的测试版
go语言下载 配置GOROOT(一般是自动的),配置GOPATH(如果想自己改的话) 参照<自己动手写Java虚拟机> > 第一章 指令集和解释器 生成了ch01.exe文件 这里还 ...
- HDU 6127 Hard challenge(扫描线)
http://acm.hdu.edu.cn/showproblem.php?pid=6127 题意: 有n个点,每个点有一个$(x,y)$坐标和一个权值,任意两点之间都有连线,并且连线的权值为两个顶点 ...
- LA 4287 等价性证明(强连通分量缩点)
https://vjudge.net/problem/UVALive-4287 题意: 给出n个结点m条边的有向图,要求加尽量少的边,使得新图强连通. 思路:强连通分量缩点,然后统计缩点后的图的每个结 ...
- Java DateUtil,日期整理
import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...
- html 获取鼠标左键事件,滚轮点击事件,右键点击事件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- lombok 中的@Data注解
今天看到有代码中的Dao包中的类文件,写的极其简洁,甚至引起了开发工具InteliJ的报错,然后程序还能稳健地跑起来. import lombok.Data; @Data public class V ...
- Xshell Xftp 免费版 (xshell6 评估期已过 解决办法)
xshell6 评估期已过,因为下载的版本是evaluation版本,是有期限的. 大家可以修改为Home and school use 的版本,这样就不会出现这个提示了. 具体的操作步骤如下: 1. ...
- javascript之非构造函数的继承
这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是 ...
- Java 访问控制关键字
public, private, protected 在控制上有什么区别和不同请参考下面的说明. 请参考下图的说明. 和下面的一个说明: │ Class │ Package │ Subclass │ ...
- JS-构造函数2
一.如何创建对象 1.对象字面量 var obj1={ name:"吻别", singer:"张学友", type:"流行" } 2.构造函 ...