随笔分类 -  vue源码解析

源码解析笔记
300行代码手写简单vue.js，彻底弄懂MVVM底层原理
摘要：当我们对vue的用法较为熟练的时候，但有时候在排查bug的时候还是会有点迷惑。主要是因为对vue各种用法和各种api使用都是只知其然而不知其所以然。这时候我们想到可以去看看源码，但是源码太长，其实我们只要把大概实现流程实现一遍，很多开发中想不明白的地方就会豁然开朗。下面我们就来实现一个简单的vue. 阅读全文
posted @ 2020-07-26 21:09 七度丢失的梦 阅读(1093) 评论(0) 推荐(1)
update（十）
摘要：Vue 的 _update 是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；由于我们这一章节只分析首次渲染部分，数据更新部分会在之后分析响应式原理的时候涉及。_update 方法的作用是把 VNode 渲染成真实的 DOM，它的定义在 src/core/inst 阅读全文
posted @ 2019-08-14 14:42 七度丢失的梦 阅读(305) 评论(0) 推荐(0)
createElement（九）
摘要：Vue.js 利用 createElement 方法创建 VNode，它定义在 src/core/vdom/create-elemenet.js 中： // wrapper function for providing a more flexible interface // without get 阅读全文
posted @ 2019-08-14 14:39 七度丢失的梦 阅读(432) 评论(0) 推荐(0)
Virtual DOM（八）
摘要：Virtual DOM 这个概念相信大部分人都不会陌生，它产生的前提是浏览器中的 DOM 是很“昂贵"的，为了更直观的感受，我们可以简单的把一个简单的 div 元素的属性都打印出来，如图所示： 可以看到，真正的 DOM 元素是非常庞大的，因为浏览器的标准就把 DOM 设计的非常复杂。当我们频繁的去做 阅读全文
posted @ 2019-08-14 14:37 七度丢失的梦 阅读(269) 评论(0) 推荐(0)
render（七）
摘要：Vue 的 _render 方法是实例的一个私有方法，它用来把实例渲染成一个虚拟 Node。它的定义在 src/core/instance/render.js 文件中： Vue.prototype._render = function (): VNode { const vm: Component 阅读全文
posted @ 2019-08-14 14:35 七度丢失的梦 阅读(449) 评论(0) 推荐(0)
Vue 实例挂载的实现（六）
摘要：Vue 中我们是通过 $mount 实例方法去挂载 vm 的，$mount 方法在多个文件中都有定义，如 src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/we 阅读全文
posted @ 2019-08-14 14:30 七度丢失的梦 阅读(1408) 评论(0) 推荐(0)
new Vue发生了什么（五）
摘要：从入口代码开始分析，我们先来分析 new Vue 背后发生了哪些事情。我们都知道，new 关键字在 Javascript 语言中代表实例化是一个对象，而 Vue 实际上是一个类，类在 Javascript 中是用 Function 来实现的，来看一下源码，在src/core/instance/ind 阅读全文
posted @ 2019-05-09 10:50 七度丢失的梦 阅读(396) 评论(0) 推荐(0)
vue源码的入口（四）
摘要：我们之前提到过 Vue.js 构建过程，在 web 应用下，我们来分析 Runtime + Compiler 构建出来的 Vue.js，它的入口是 src/platforms/web/entry-runtime-with-compiler.js： /* @flow */ import config 阅读全文
posted @ 2019-05-08 14:32 七度丢失的梦 阅读(570) 评论(0) 推荐(0)
Vue.js 源码构建（三）
摘要：Vue.js 源码是基于 Rollup 构建的，它的构建相关配置都在 scripts 目录下。 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.json 文件，它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象。 我们通常会配置 script 字段作为 NPM 的 阅读全文
posted @ 2019-05-08 11:33 七度丢失的梦 阅读(545) 评论(0) 推荐(0)
Vue.js 源码目录设计（二）
摘要：Vue.js 的源码都在 src 目录下，其目录结构如下。 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代码 阅读全文
posted @ 2019-05-08 10:45 七度丢失的梦 阅读(311) 评论(0) 推荐(0)
认识Flow（一）
摘要：Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于我们阅读源码。 为什么用 Flow JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很容易就写出非常隐蔽的 阅读全文
posted @ 2019-05-08 10:38 七度丢失的梦 阅读(510) 评论(0) 推荐(0)