Learn-Vue-Source-Code

Vue.js 源码逐行剖析工具
授权协议 MIT
开发语言 JavaScript
所属分类 开发工具、 代码管理分析/审查/优化
软件类型 开源软件
地区 国产
投 递 者 葛泳
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

本项目是将Vuejs源码分为九大模块,分别是:

  1. 变化侦测篇

    学习Vue中如何实现数据的响应式系统,从而达到数据驱动视图。

  2. 虚拟DOM篇

    学习什么是虚拟DOM,以及Vue中的DOM-Diff原理

  3. 模板编译篇

    学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM

  4. 实例方法篇

    学习Vue中所有实例方法(即所有以$开头的方法)的实现原理

  5. 全局API篇

    学习Vue中所有全局API的实现原理

  6. 生命周期篇

    学习Vue中组件的生命周期实现原理

  7. 指令篇

    学习Vue中所有指令的实现原理

  8. 过滤器篇

    学习Vue中所有过滤器的实现原理

  9. 内置组件篇

    学习Vue中内置组件的实现原理

每个模块逐个击破,逐行分析源码的逻辑,取他人之长,补己之短。希望能帮助到更多的Vue初学者。

  • vue 源码学习 vue.js通过Object.defineProperty()将data下面的数据转成observable,可观察的。通过Object.setter和Object.getter实现响应式。 vue.js的事件注册是通过Vue.prototype.** 为Vue添加实例方法。 vue.js源码中使用了js类型校验插件-flow.js /** * 声明带类型的函数 * 这里是声明

  • 前言 时间:2022.3.18 内容:下载vue、node,运行vue ui 描述:u1s1,其实不太明白为什么用vue框架需要用node,也许类似java需要jdk一样吧?我以为一模一样的操作报了各种问题,一通搜索结果还是无解。后来我想了想,vue和node我都下好了呀,连node版本更新到最新稳定版了,还要我咋样。但是!!迷迷糊糊之后猛然清醒,我只是vue ui这个指令打不开创建页面呀(看一遍

  • npm安装vue报错,信息如下: C:\Users\Q>npm install -g @vue/cli npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry.npmjs.org/@vue%2fcli failed,

  • 1.Virtual Dom是什么 Virtual Dom, 又叫虚拟dom,本质是一个js对象,是用来描述一个dom节点信息。 例如,一个普通的dom节点: <div class="wrap">i am text</div> 它的virtual dom 是: const divVdom = { tag: 'div', attrs: { class: "wrap"

  • 直接上代码 vue-cli3 创建好的项目,已经帮我们做了下面的事情 通过「mini-css-extract-plugin」将 css 打包成单个文件 添加「@」别名,指向「src」目录 通过「TerserWebpackPlugin」来压缩 js 代码 在打包时,将引入的第三方插件或库,打包到「chunk-vendors」中 查看项目中的默认 webpack 配置,执行下面的命令 vue insp

  • C:\WINDOWS\system32>npm install @vue/cli -g npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolv

  • 由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会“太折腾”。 一、文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容。 ├─build │ ├─build.js │

 相关资料
  • Libevent 是一个轻量级的开源高性能网络库,使用者众多,研究者更甚,相关文章也不少。写这一系列文章的用意在于,一则分享心得;二则对 libevent 代码和设计思想做系统的、更深层次的分析,写出来,也可供后来者参考。

  • 之前就一直有写博客的想法,别人也建议写一写,但一直没有动手写,自己想了一下原因,就一个字:懒、懒、懒。为了改掉这个毛病,决定从今天开始写博客了,一方面对自己掌握的知识做一个梳理,另一方面和大家做一个交流,更能深化对问题的理解。废话好像有点多,好了,各位乘客,收起小桌板,系好安全带,要发车喽。 Cesium作为一个开源的webgl三维地球渲染引擎,具备很多的基础功能和高级功能。之前已经有很多文章对C

  • Mininet 是研究软件定义网络,进行快速验证的高效模拟平台。本书的一到三章介绍 Mininet 的安装和使用;第四章介绍一些高级功能;五到七章分析 Mininet 的源码实现。

  • 本文向大家介绍剖析Angular Component的源码示例,包括了剖析Angular Component的源码示例的使用技巧和注意事项,需要的朋友参考一下 Web Component 在介绍Angular Component之前,我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式,提出Web Component的标准。 每个组件包含自己的html、css、j

  • Cesium中的视频投影是指将视频作为一种物体材质,实现在物体上播放视频的效果。这个功能在Cesium早期版本中就支持了,在Code Example中有一个示例。今天就来分析一下其内部实现原理。 1. 添加视频投影及效果 示例中添加视频投影的代码分为两部分,第一步是添加div控件,控件负责视频播放、暂停等任务,代码如下: <video id="trailer" muted autoplay loo

  • 最近一直在看 vue 2.2.6 的源码,所以准备分几个模块分别记录一下。由于水平有限,对整个框架的源码还没有整体的把握。所以前期内容可能比较零散,更多的是记录自己看的过程。慢慢整理成比较完整的源码分析。 备注:最近为了加深印象,写了一个简单的 mvvm 的实现,参考了 Vue 中模板解析、数据监听、render 函数的生成 传送门。 该源码分析,会带着大家一起学习 Vue 的大部分代码,而不是简