Vue源码学习目录(持续更新中)

置顶 已于 2022-08-09 09:23:16 修改
阅读量1w 收藏 127
点赞数 23
分类专栏： Vue 文章标签： Vue源码
于 2020-04-15 07:40:39 首次发布
原文链接：https://ustbhuangyi.github.io/vue-analysis/v2/components/create-component.html#%E5%AE%89%E8%A3%85%E7%BB%84%E4%BB%B6%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0
版权

Vue源码学习-目录

学习内容和文章内容来自 黄轶老师
《Vue.js2.0 源码揭秘》、
《Vue.js 3.0 核心源码解析》
这里分析的源码是Runtime + Compiler 的 Vue.js
调试代码在:node_modules\vue\dist\vue.esm.js 里添加
vue版本:Vue.js 2.5.17-beta

你越是认真生活，你的生活就会越美好！

章节目录

在这里插入图片描述

准备工作

Vue源码学习 - 准备工作

数据驱动

Vue源码学习 - 数据驱动

组件化

Vue源码学习 - 组件化（一） createComponent

Vue源码学习 - 组件化 一 createComponent

Vue源码学习 - 组件化（二） patch

Vue源码学习 - 组件化 二 patch

Vue源码学习 - 组件化（三） 合并配置

Vue源码学习 - 组件化 三 合并配置

Vue源码学习 - 组件化（四） 生命周期

Vue源码学习 - 组件化（四） 生命周期

Vue源码学习 - 组件化（五） 组件注册

Vue源码学习 - 组件化（五） 组件注册

深入响应式原理

原理图
在这里插入图片描述

Vue源码 深入响应式原理（一） 响应式对象

深入响应式原理 （一）响应式对象

Vue源码 深入响应式原理（二） 依赖收集 & 派发更新

深入响应式原理 （二）依赖收集 & 派发更新

Vue源码 深入响应式原理 （三）nextTick & 检测变化的注意事项

深入响应式原理 （三）nextTick & 检测变化的注意事项

Vue源码 深入响应式原理 （四）计算属性 VS 侦听属性

深入响应式原理 （四）计算属性 VS 侦听属性

Vue源码 深入响应式原理 （五）组件更新

深入响应式原理 （五）组件更新

深入响应式原理 （六）Props (v2.6.11)

深入响应式原理 （六）Props (v2.6.11)

深入响应式原理 （七）原理图总结

深入响应式原理 （七）原理图总结

编译

编译（一）编译入口

编译（一）编译入口

编译（二）parse 解析模板字符串生成 AST

编译（二）parse 解析模板字符串生成 AST

编译（三）optimize 优化AST树

编译（三）optimize 优化AST树

编译（四）codegen 把优化后的 AST 树转换成可执行的代码

编译（四）codegen 把优化后的 AST 树转换成可执行的代码

扩展

扩展（一）event

扩展（一）event

Vue Router

Vue Router（一）路由注册

Vue源码 Vue Router（一）路由注册

Vue Router（二）VueRouter对象

Vue Router（二）VueRouter对象

Vue Router（三）matcher 路由匹配器

Vue Router（三）matcher路由匹配器

Vue Router（四）路径切换

Vue Router（四）路径切换

Vuex

Vuex（一）状态管理模式

Vuex（一）状态管理模式

Vuex（二）Vuex 初始化

Vuex（二）Vuex 初始化

Vuex（三）Vuex API实现

Vuex（三）Vuex API实现

Vuex（四）Vuex 插件

Vuex（四）Vuex插件

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强

陈坚泓
关注
  • 23
    点赞
  • 踩
  • 127
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
Vuexy v6.0 – Vuejs、React、HTML 和 Laravel 管理仪表板模板
01-06
Vuexy – Vuejs + HTML 管理仪表板模板 – 是基于 Vue CLI、Vuex 和 Vuexy 组件框架的对开发人员最友好且高度可定制的 VueJS + HTML 管理仪表板模板。 演示地址：https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/landing/ 更新日志： HTML、HTML + Laravel版本 添加 ----基于 Ul/UX 原则的全新设计 ----新的边框和深色布局 ----新的电子商务仪表板 ----发票应用 ----看板应用程序（仅适用于 HTML 和 HTML + Laravel） ----文件管理器应用程序（仅适用于 HTML 和 HTML + Laravel） ----定价页面 ----博客页面（列表、详细信息、编辑页面） ----添加了布局选项 ----精简菜单 ----盒子布局 ----无菜单 ----空布局 ----空白布局 ----树组件 ----评级组件 ----传单地图 ----SVG 和字体图标支持 更新 ----将 Bootstrap 更新至 v4.5.3 ----更新 Laravel 8 ----更新 Laravel UI、Passport 到最新版本 ----将所有库更新到最新版本 ----改进的组件和扩展 ----改进的小部件和卡片（带有新的游戏化卡片、分析卡片） ----更新的日历应用 ----更新的待办事项应用程序 ----更新的用户应用程序 ----更新的身份验证页面（2 种类型，带有 SVG 插图） ----更新帐户设置 ----更新的常见问题 ----更新的知识库 ----带有实际使用示例的改进表 ----使用新组件改进表单 ----改进的图表 ----更新的杂项页面 ----改进的文档以更好地理解和使用 已弃用 ----AgGrid（将在未来更新中移除） 已移除 ----删除了内容页面并移至文档 ----资料清单 ----芯片组件 ----图表 ----谷歌地图 设计文件【添加】 ----添加了带有原子设计系统的 Sketch & Figma 完整设计文件。 ----明暗设计系统 ----响应式支持 ----2 个仪表板和 6 个布局 ----9 个应用程序和 30 多个页面 ----所有 UI 和表单元素、小部件、图表 电子邮件模板【添加】 ----添加了随时可用的电子邮件模板 --------欢迎 --------验证账户 --------重设密码 --------关闭户口 --------发票 --------促销
基于vue的个人博客源代码
04-13
该资源是基于vue的个人博客项目的源代码。项目介绍请看https://blog.csdn.net/weixin_43763430/article/details/117160369
Vue源码常见问题
yiyueqinghui的博客
06-20 885
1，new Vue()都做了什么 1，new Vue ( ）是创建 Vue 实例，它内部执行了根实例的初始化过程。 2， 初始化过程具体包括以下操作： 合并配置 初始化事件中心 初始化生命周期 (new Vue()时只调用了beforeCreated、created两个生命周期) 初始化渲染 初始化数据 data、props、computed、watcher 等 3，new Vue( ) 创建了根实例并准备好数据和方法，以备将来执行挂载进使用。 2，说一说你对Vue响应式的理解 1，所谓数据响应式
Vue源码篇
深夜代码酒神
06-27 1598
Vue源码篇
vue源码学习
weixin_44208404的博客
11-11 394
将html转化成AST语法树，然后根据AST语法树使用render函数生成虚拟DOM节点。
小满vue3笔记（含源码解读）
ceike的博客
06-25 3376
。。AST语法数:这个东西在ES6转ES5的插件babel；ts转js中会进行ast转换根据满哥说的，我的理解是vue3在用js去描述DOM对象；这个描述和操作不一样（js操作dom）正在上传…重新上传取消为什么不直接操作dom：原因：dom的属性太多，影响性能我看是说这一次描述dom，会全部描述进去，影响性能。
Vue源码解析
weixin_43132396的博客
12-20 6097
主要目录结构 scripts：构建相关的脚本和配置文件 dist：构建后的文件 flow：Flow的类型声明 packages：vue-server-render 和 vue-template-compiler，它们作为单独的NPM包发布 test：所有的测试代码 examples：实例代码 types：TypeScript 类型定义 src：源代码 compiler ： 与模版编译相关的代码 core ： Vue核心库（通用的、与平台无关的运行时代码） observer ：实现变化侦测的代码 vdom
vue 源码解析
wanglun_的博客
07-14 2112
watch：watcher解析表达式，收集依赖，在依赖（表达式值）改变时触发回调（handler）；调用所有watcher的update更新。数据双向绑定：用Object.defineProperty方法重写data中每个数据的get，set方法，在get中执行依赖收集（执行 Dep.depend 方法）和set中派发更新通知（执行 Dep.notify 方法）。computed。
Vue源码系列（一）：Vue源码解读的正确姿势
热门推荐
Ningdz的博客
12-10 1万+
作为一名开发人员，阅读源码是非常好的学习方式，尤其Vue又是当下很受欢迎的前端框架，随着用的人越来越多，不断推动着源码地完善。在源码中有着各位大佬多年积淀下来的精华，而这些精华就非常值得我们学习。
Vue源码解读
m0_73442777的博客
04-18 2303
本文主要介绍了Vue.js的源代码解读相关的步骤和技巧，包括安装Vue.js源代码、学习Vue.js的架构、阅读Vue.js的源代码、参考Vue.js的文档和社区资源，以及尝试修改Vue.js的源代码等内容。如果你想深入学习Vue.js的实现原理和内部机制，阅读本文可以为你提供一定的参考和帮助。
vue源码
qq_41256253的博客
06-23 1957
这里写目录标题01-vue源码学习-柯里化函数一、概念:二、代码实现三、柯里化函数原理其实是闭包02-vue源码学习-vue的基本执行流程和简单渲染模型03-vue源码学习-响应式原理(对象和数组) 01-vue源码学习-柯里化函数 一、概念: 柯里化: 一个函数原本有多个参数, 之传入一个参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构. 偏函数: 一个函数原本有多个参数, 之传入一部分参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构. 高阶函数: 一个函数参数是一个函数, 该
基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip
06-20
基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip 基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip 基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip 【资源说明】 该项目是...
vue.js:学习vue.js源码-js
03-24
支持Vue.js Vue.js是MIT许可的开放源代码项目，其持续的开发完全有赖于这些出色的。 如果您想加入他们，请考虑： 。 。 Patreon和OpenCollective有什么区别？ 通过Patreon捐赠的资金将直接用于支持Evan You在Vue.js...
springboot+vue旅游管理系统
05-06
springboot+vue旅游管理系统，里面有文档和PPT，具体源码可私聊获取！ 仅供学习交流！ 后续会持续分享相关资源，记得关注哦！ springboot+vue旅游管理系统 springboot+vue旅游管理系统 springboot+vue旅游管理系统 ...
基于SpringBoot+Vue 驾校理论课模拟考试系统(自动化部署)源码+项目说明.zip
01-08
1、基于SpringBoot+Vue 驾校理论课模拟考试系统(自动化部署)源码+项目说明.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目...
springboot+vue外卖点餐系统
最新发布
05-06
springboot+vue外卖点餐系统，里面有文档和PPT，具体源码可私聊获取！ 仅供学习交流！ 后续会持续分享相关资源，记得关注哦！ springboot+vue外卖点餐系统 springboot+vue外卖点餐系统 springboot+vue外卖点餐系统 ...
Vue3源码 学习
qq_42544091的博客
10-11 3404
学习vue源码
Vue源码
weixin_53137201的博客
07-10 1546
vue模板引擎的鼻祖，模板引擎，就是v-for，负责将用户给的数据和模板进行处理之后返回成一个dom字符串分为七个模块，Scanner，index，parseTemplateToTokens，nestTokens，renderTemplate，lookup，parseArray对应四个指针，分别是：会进行使用这四种方式进行查找，如果查找不到的话就接着使用下一种方式进行查找，如果找到的话就不会再使用下一种方式查找了如果这四种方式都没有查找到，就会进行循环遍历旧节点，看看旧节点中是否有新前指向的节点，如果有则会
vue的源码解析
vue
06-18 1275
一、目录结构 1、src ├──compiler#编译相关 ├──core#核心代码 ├──platforms#不同平台的支持 ├──server#服务端渲染 ├──sfc#.vue文件解析 ├──shared#共享代码 core目录：包含了Vue.js的核心代码，包括内置组件、全局API封装，Vue实例化、观察者、虚拟...
cesium vue源码
07-03
### 回答1： Cesium Vue源码是一个开源项目的源代码，它结合了Cesium和Vue.js两个框架的优势，用于在Web上构建高性能的3D地球应用程序。 Cesium是一个强大的基于Web的地理空间可视化引擎，可以实现全球范围内的地图展示和3D场景的渲染。而Vue.js是一个流行的JavaScript框架，用于构建用户界面。通过将这两个框架结合在一起，Cesium Vue能够提供一个更灵活和易于使用的工具，用于开发各种各样的地球应用程序。 Cesium Vue的源码包含了各种组件和工具，用于与Cesium引擎进行交互和集成。例如，它提供了CesiumViewer组件，用于创建一个全功能的Cesium场景，并且能够与Vue组件进行交互。它还提供了各种用于加载地理数据、设置相机位置、渲染3D对象等功能的工具函数。 使用Cesium Vue源码，开发人员可以方便地创建一个具有交互性和可视化效果的地球应用程序。他们可以轻松地创建地图、添加地标和矢量数据，实现相机控制、动画效果等功能。同时，由于使用了Vue.js框架，开发人员还能够轻松管理和更新应用程序的状态，并且可以方便地与其他Vue组件进行集成。 总的来说，Cesium Vue源码提供了一个强大的工具，用于开发具有高性能和可交互性的3D地球应用程序。通过结合Cesium和Vue.js的优势，它能够为开发人员提供更好的开发体验和更多的灵活性。无论是构建地图应用程序、数据可视化还是虚拟现实应用程序，Cesium Vue都是一个非常有价值的工具。 ### 回答2： Cesium Vue源码是一个基于Vue框架封装的对Cesium进行集成的库。Cesium是一个用于创建各种地理和地球空间应用的开源JavaScript库，而Vue是一个用于构建用户界面的渐进式JavaScript框架。 Vue的优势在于其虚拟DOM和响应式数据绑定的特性，使得开发者可以更加高效地构建可复用的组件和灵活的界面。Cesium则提供了强大的地理可视化功能，包括3D地球的展示、地理信息的呈现和地图操作等。 Cesium Vue源码的主要目的是将Cesium和Vue无缝集成，使得开发者可以更加便捷地在Vue项目中使用Cesium的功能。通过Cesium Vue，我们可以轻松地将Cesium的3D地球嵌入到Vue的组件中，使用Vue的数据绑定和组件化技术来管理Cesium的状态和交互。 Cesium Vue源码实现了Cesium和Vue之间的双向数据绑定，使得我们可以通过Vue的数据驱动Cesium的展示和交互。同时，Cesium Vue提供了一系列的Vue组件，用于简化和封装Cesium的常用功能，比如地图控制、实体渲染和相机操作等。 通过Cesium Vue，开发者可以利用Vue的生态系统和丰富的插件，以及Cesium的地理可视化功能，快速构建高质量的地理和地球空间应用。无论是创建交互式地图应用，还是构建具有地球模型的数据可视化工具，Cesium Vue都提供了简洁、灵活和高效的开发方式。 总之，Cesium Vue源码是一个基于Vue框架封装的Cesium集成库，通过它我们可以更加便捷地在Vue项目中使用Cesium的功能，享受Vue的开发便捷性和Cesium的地理可视化能力。 ### 回答3： Cesium-Vue源码是一个基于Vue.js框架开发的Cesium地球引擎的封装库，用于在Vue项目中使用Cesium进行地球可视化开发。该库主要提供了一系列在Vue组件中使用Cesium功能的API和组件。 源码的结构主要包括了基于Vue的组件目录、样式文件目录和存放Cesium相关代码的目录。在组件目录中，可以看到各个Vue组件用于实现不同的地球可视化功能，如地图视图、图层控制、导航控制等。样式文件目录主要包括了用于美化地球视图的CSS样式。 Cesium-Vue源码的主要功能包括： 1. 地图视图：通过Vue组件提供的功能，可以在项目中创建一个地球视图，并进行交互操作，如移动、旋转等。 2. 图层控制：该库提供了图层控制的API和组件，使得开发者可以方便地添加不同类型的图层，如地形图、影像图等，并进行切换和控制。 3. 数据可视化：通过Cesium的API和Vue的数据绑定机制，可以实现将数据可视化展示在地球上，如点、线、面等实体的展示和交互。 4. 导航控制：Cesium-Vue提供了一系列的API和组件，用于实现地球视图的导航控制，如缩放、旋转、定位等操作。 总体而言，Cesium-Vue源码的设计和实现通过将Cesium地球引擎与Vue.js框架相结合，提供了一种便捷的方式在Vue项目中开发地球可视化应用。通过使用该库，可以方便地在Vue项目中创建地球视图、添加图层、展示数据，并实现交互和导航控制等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值