vue源码核心部分
1.模板编译 初始化时做的:template ==parse()==>ASTtree ==generate()==>render函数 ==> mount(调用dom方法)
每次更新都要做的: render函数 ==> vNode tree ==> patch(oldVnode, vNode) ==> update(调用dom方法)
2.diff算法 关键词:同层级比较 复杂度o(n) 两对头尾指针 加key复用
实现: patch==> 判断sameNode ==> patchNode() ==> 更新text && updateChildren ==> while循环 递归调用patchNode
3. $watch 批量更新 通过Object.defineProperty实现
vue源码核心部分的更多相关文章
- VUE 源码学习01 源码入口
VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后 ...
- 大白话Vue源码系列(05):运行时鸟瞰图
阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue ...
- 入口文件开始,分析Vue源码实现
Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...
- 入口开始,解读Vue源码(一)-- 造物创世
Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...
- 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
- 深入vue - 源码目录及构建过程分析
公众号原文链接:深入vue - 源码目录及构建过程分析 喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 “ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整 ...
- 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码
前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...
- Vue源码解析(一):入口文件
在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...
- vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
随机推荐
- java基础---->Serializable的使用
本次讲解中我们建立一个Java的项目去体会一下序列化Serializable的使用,序列化的原理以及序列化的自定义请参见我的另外一篇博客(java高级---->Serializable序列化的源 ...
- vue2.0 导出Excel表格数据
1.安装三个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader 2.在项目中创建一个文件夹(比 ...
- python全栈开发笔记---------数据类型-----集合set
定义:由不同元素组成的集合,集合中是一组无序排列的可hash值,可以作为字典的key 1.不同元素组成 2.无序 3.集合中元素必须是不可变类型(数字,字符串,元组) 特性:集合的目的是讲不同的值放到 ...
- Centos7 systemctl和防火墙firewalld命令(参考https://www.cnblogs.com/marso/archive/2018/01/06/8214927.html)
一.防火墙的开启.关闭.禁用命令 (1)设置开机启用防火墙:systemctl enable firewalld.service (2)设置开机禁用防火墙:systemctl disable fire ...
- Verilog中的$display和$write任务
$display(p1,p2, …,pn); $write(p1,p2, …,pn); 这两个函数和系统任务的作用都是用来输出信息,即将参数p2到pn按参数p1给定的格式输出.参数p1通常称为:“格式 ...
- Verilog强制激励语法
Verilog强制激励语法 1. 在一个过程块中,可以用两种不同的方式对信号变量或表达式进行连续赋值. 过程连续赋值往往是不可以综合的,通常用在测试模块中. 两种方式都有各自配套的命令来停止赋值过程. ...
- Hadoop学习笔记03_Hive练习
Apache Hive是提供了一种数据映射去读取文本数据,以及提供了类SQL的语句来执行MapReduce. 也就是一种更简化操作的MR. 之前的练习是跟着视频学的hive-1.2.2 而这几天自己练 ...
- windows环境下安装Python的Rtree包
Rtree包是基于libspatialindex开发的,在安装Rtree之前必须先安装libspatialindex.关于libspatialindex,除了官网的英文外,这里有一个中文翻译过来的介绍 ...
- UILabel Text显示不同的颜色
UILabel的text实现不同的颜色. NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithStr ...
- 【转载】 强化学习(九)Deep Q-Learning进阶之Nature DQN
原文地址: https://www.cnblogs.com/pinard/p/9756075.html ------------------------------------------------ ...