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源码核心部分的更多相关文章

  1. VUE 源码学习01 源码入口

    VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后 ...

  2. 大白话Vue源码系列(05)：运行时鸟瞰图

    阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue ...

  3. 入口文件开始，分析Vue源码实现

    Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...

  4. 入口开始，解读Vue源码（一）-- 造物创世

    Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...

  5. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...

  6. 深入vue - 源码目录及构建过程分析

     公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ​“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整 ...

  7. 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  8. Vue源码解析（一）：入口文件

    在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...

  9. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 （diff部分待后续更新）

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

随机推荐

  1. mybatis源码解析之环境准备

    概述 对于mybatis而言,大家一定都不陌生,我相信很多同学都跟我一样,用起来非常的熟练,但是其内部的实现原理呢,不太清楚,经常面试的时候,面试官问及这方面的知识,都只能尴尬的回答不知道,或者不清楚 ...

  2. MySQL-8.0.15在Win10和Ubuntu上安装&使用

    一.Windows环境下安装: 1.下载MySQL压缩包 官网地址:https://dev.mysql.com/downloads/mysql/ 点击直接下载: 2.解压到本地目录,并添加一个配置文件 ...

  3. UVALive - 4223，hdu2962(简单dijkstra)

    Trucking Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. 基2时域抽取FFT、IFFT的C++实现代码，另附DFT与IDFT的原始实现--转1

    介绍网络上的原理介绍非常丰富,具体请自行搜索网络资源. 本算法依靠FFT流图进行布置. 算法 ##进行完所有的原理推导后,我们可以得到如下的16点FFT流图: 通过上图可以看出整个流图输入序列的顺序已 ...

  5. 2019-04-16-day033-锁与队列

    内容回顾 几个问题 概念多,练习少 不问问题 概念?代码? Process类 并发并行 并发 是同一时间段内多个任务交替使用同一个cpu 并行 是在同一个时刻多个任务在不同的cpu上同时执行 同步异步 ...

  6. 剑指Offer 42. 和为S的两个数字 （其他）

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 题目 ...

  7. web（七）css的语法规则、注释

    css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...

  8. .net4.0调用非托管DLL的异常捕获

    转发: 由于有些非托管的DLL内部异常未有效处理,当托管程序调用到这样的DLL时,就引起托管程序意外退出. 托管程序使用通常的捕获try……catch块不起作用.原因是.NET 4.0里新的异常处理机 ...

  9. django模型系统一

    django模型系统一 1.数据库的连接配置 django连接mysql的配置流程 安装pymysql       **  pip install pymysql 修改配置 修改setting的配置文 ...

  10. cordova日期插件的使用：cordova-plugin-datepicker

    1. 添加插件:cordova plugin add cordova-plugin-datepicker; 2.插件的主体样式设置: 3.以上5中样式的截图: THEME_TRADITIONAL的样式 ...