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. 基于c#的windows基础设计（学习日记1）【关于异或运算】

    第一次接触异或运算,总体来说比哈希算法简单的多,无论是理解还是代码的难易度,唯一不好的是在固定了密钥之后,随机性就小了很多,所以安全性比起哈希算法还是有所差距. 原理在网站上很多都有所以就不再赘述了. ...

  2. github命令总结

    一.创建版本库 1.创建一个空目录 $ mkdir learngit $ cd learngit $ pwd //pwd命令用于显示当前目录 2.创建一个版本库(通过git init命令把这个目录变成 ...

  3. 运维自动化 第一章 git

    一.git简单操作 4个地方: 工作区: 当前编辑的区域 缓存区: add 之后的区域 本地仓库: commit之后的区域 远程仓库 :远程的区域 简单操作: git init 初始化操作 比如我选定 ...

  4. selenium 常用操作

    官方文档: https://selenium-python.readthedocs.io/api.html#selenium.webdriver.remote.webdriver.WebDriver. ...

  5. 因mybatis逆向工程而产生的问题

    今天我在搭建SSM框架环境时,配置都配好了,就等运行测试,谁知道一来就报错,并且这个错误折腾了我一下午,真的是血的教训:   BeanCreationException:Error creating ...

  6. Python选修课第一届Turtle绘图大赛田康林赵冰珂组

    点击此处查看视频 from turtle import* setup(600,600,200,200) #脸 penup() goto(-190,0) seth(-90) pendown() penc ...

  7. Oracle启动和归档模式

    数据库运行 Oracle数据库的完整启动过程是分步骤完成的,包含以下3个步骤: 启动实例–>加载数据库–>打开数据库 因为Oracle数据库启动过程中不同的阶段可以对数据库进行不同的维护操 ...

  8. Alpha冲刺10

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10045588.html 作业博客:https://edu.cnblogs.com/campus ...

  9. TensorFlow函数教程：tf.nn.dropout

    tf.nn.dropout函数 tf.nn.dropout( x, keep_prob, noise_shape=None, seed=None, name=None ) 定义在:tensorflow ...

  10. 外网如何访问web项目holer实现篇

    外网访问WEB 内网主机上安装了WEB服务器,只能在局域网内访问,怎样从公网也能访问本地WEB应用? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装Java 1.7及以上版本 ...