松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › vue3框架设计精髓之Github很火的项目vue-design,学vue必须关注

vue3框架设计精髓之Github很火的项目vue-design,学vue必须关注

迦娜王
1年前Vue
2,362 1 0

简介

熟悉vue的人估计都在关注的个项目,这个项目最开始是围绕vuejs源码分析,做到一定程度决定不再维护源码详解,而转向设计思想布道,vuejs源码分析就转到elegant branch下,主分支(master)专注讲渲染器(render),专注围绕vue3框架设计精髓,只为一个目标: 源码会一直迭代,但你只需要掌握核心设计原则。github star 4.1K , 我估计等vue3真正发布的时候,这个项目Github star 一定可以到14K , MIT协议。

vue3框架设计精髓之Github很火的项目vue-design,学vue必须关注

阅读感悟

从Jquery时代如何render一个组件DOM讲起,进而提到Virtual DOM, 再由Virtual DOM扩展到怎么创建Virtual DOM,Virtual DOM怎么绑定数据和属性,挂载原理(有状态组件挂载与函数式组件挂载),怎么更新Virtual DOM直至更新DOM(patch),怎么优化性能(Diff 算法原理),写的十分详细,也容易理解,希望大家都去阅读,尤其是想深入了解vuejs的框架的。感谢github项目作者HcySunYang,通过学习,让我更加深入了解了vuejs, 必须有空就来阅读一遍,加深理解。Virtual DOM文章用VNode代替,个人更喜欢Virtual DOM,所以VNode 也就是Virtual DOM。

vue3框架设计精髓之Github很火的项目vue-design,学vue必须关注

Virtual DOM种类

vue3框架设计精髓之Github很火的项目vue-design,学vue必须关注

Virtual DOM种类对应挂载函数

vue3框架设计精髓之Github很火的项目vue-design,学vue必须关注

Diff 算法

vue3框架设计精髓(渲染器)目录大纲

  • 一、组件的本质
  1. 组件的产出是什么
  2. 组件的 VNode 如何表示
  3. 组件的种类
  • 二、先设计 VNode 吧
  1. 用 VNode 描述真实 DOM
  2. 用 VNode 描述抽象内容
  3. VNode 的种类
  4. 使用 flags 作为 VNode 的标识
  5. 枚举值 VNodeFlags
  6. chidlren 和 ChildrenFlags
  7. VNodeData
  • 三、辅助创建 VNode 的 h 函数
  1. 在 VNode 创建时确定其类型 – flags
  2. 在 VNode 创建时确定其chidlren的类型
  3. 使用 h 函数创建 VNode
  • 四、渲染器之挂载
  1. 责任重大的渲染器
  2. 挂载普通标签元素
  • 2.1、基本原理
  • 2.2、class的处理
  • 2.3、Attributes 和 DOM Properties
  • 2.4、事件的处理
  1. 挂载纯文本、Fragment 和 Portal
  • 3.1、挂载文本节点
  • 3.2、挂载 Fragment
  • 3.3、挂载 Portal
  1. 有状态组件的挂载和原理
  2. 函数式组件的挂载和原理
  • 五、渲染器之patch
  1. 基本原则
  2. 替换 VNode
  3. 更新标签元素
  • 3.1、更新标签元素的基本原则
  • 3.2、更新 VNodeData
  • 3.3、更新子节点
  1. 更新文本节点
  2. 更新 Fragment
  3. 更新 Portal
  4. 有状态组件的更新
  • 7.1、主动更新
  • 7.2、初步了解组件的外部状态 props
  • 7.3、被动更新
  • 7.4、我们需要 shouldUpdateComponent
  1. 函数式组件的更新
  • 六、渲染器的核心 Diff 算法
  1. 核心 Diff 算法的发展史
  2. React 的核心 Diff 算法原理
  3. Vue2 的核心 Diff 算法原理
  4. Vue3 所采用的核心 Diff 算法及原理
  • 4.1、相同的前置和后置元素
  • 4.2、移动次数总是最少的
  • 4.3、最长递增子序列
  • 七、自定义渲染器
  1. 自定义渲染器的原理
  2. 自定义渲染器的应用
0
最详细的基于webpack的Vue Hello World应用开发步骤
上一篇
优秀的Vue UI组件库合集,你值得收藏
下一篇
评论 (1)

请登录以参与评论。

现在登录
  • good luck

    很显然vue-admin-beautiful已经完全后来者居上了
    开源地址:https://github.com/chuzhixin/vue-admin-beautiful/
    演示地址:https://chu1204505056.gitee.io/vue-admin-beautiful/
    pro演示地址:https://chu1204505056.gitee.io/vue-admin-beautiful-pro/
    ![](https://oscimg.oschina.net/oscnet/up-0d098308d834f605c459b770676027b4332.png)

    4月前
聚合文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
2月前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
2月前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
2月前
新手必看的前端项目去中心化和模块化思想
2月前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
1
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
231 喜欢
  • 0
  • 1
  • Top