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.支持将各种宽高不一致的图片,自动剪切成默认图 ...
随机推荐
- 项目梳理7——Nuget包管理
1.添加Nuget源 nuget包管理.生成自己的nuget包.向 NuGet 添加更多程序包源 nuget的所有使用介绍 打包示例 .nuspec文件声明的是对应NuGet包的以下内容: 包更新命令 ...
- 【TCP/IP详解 卷一:协议】第二十四章 TCP的未来与性能
来到了TCP的最后一个章节,未来与性能.在当时(1991年)的未来,如今已经部分变为现实,部分就只是历史中的实验. 主要内容: 路径MTU的发现与TCP的结合. 长肥管道 和 高速千兆比网络. 窗口扩 ...
- 【Django】【四】测试
[Testing in Django] 通过参数可控制Django项目不同级别的测试. 1. 运行sign应用下所有的测试用例: \\guest\python manage.py test sign ...
- 【bzoj】2733: [HNOI2012]永无乡
Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...
- dos与unix系统的格式转化
unix 只用\n作为行结束符,而在 dos中是以\r和\n作为行结束符, 如果一个文件是在unix系统下创建,然后想在dos下使用,就要用unix2dos,如 unix2dos file 如果一个文 ...
- c++ 指定长度容器元素的拷贝(copy_n)
#include <iostream> // cout #include <algorithm> // copy #include <vector> ...
- Jmeter 抓app包 抓到一半不好用了
错误描述: java.net.ConnectException: Connection refused (Connection refused) at java.net.PlainSocketImpl ...
- Node.js结合Selenium做Web自动化测试
发现腾讯课堂上有个node.js结合Selenium做Web自动化测试的教学视频, 听来感觉不错,一来老师讲的还不错,二来node.js这门语言会越来越热,学会总没什么坏处,三来发现CukeTest这 ...
- django查询操作
查询操作是Django的ORM框架中最重要的内容之一.我们建立模型.保存数据为的就是在需要的时候可以查询得到数据.Django自动为所有的模型提供了一套完善.方便.高效的API,一些重要的,我们要背下 ...
- idea运行main方法报错,提示Shorten command line for xxx
在Intell IDEA运行main函数的时候遇到了如下错误: Error running' xxxxxx': Command line is too long. Shorten command li ...