上一篇博客中学习了项目的结构，这篇博客来学几个简单的组件的实现。 在上一篇博客中我们提到了组件的源码都是存放在 packages 目录下的，所以我们从中挑一些组件来学习。先从简单的入手，来学习 button、radio、checkbox和InputNumber这四个组件的源码~ Button找到 packages/button/ 目录下，先看看 index.js 做了什么？import ElButton from './src/button';// 注册全局组件ElButton.install = function(Vue) { Vue.component(ElButton.n ...

由于面试需要，先来几发 element 源码学习博客。Vue 源码还将继续更新。 好，现在我们开始学习 element —— 最受欢迎的 Vue UI 框架。 package.json我觉得要看一个前端项目，首先必须得看看 package.json 这个文件。 编译入口来看看编译的入口 "scripts": { # 安装依赖 "bootstrap": "yarn || npm i", # 构建文件 "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node ...

从上一篇博客中，我们知道了template编译的整体逻辑和template编译后用在了哪里。本文着重讲下HTML的解析过程。 parse 方法所有解析的起点就在 parse 方法中，parse方法最终将返回为一个 AST 语法树元素。// src/core/compiler/parser/index.jsexport function parse ( template: string, options: CompilerOptions): ASTElement | void { warn = options.warn || baseWarn platformIsPreTag ...

这次，来学习下Vue是如何解析HTML代码的。 template 解析用在哪从之前学习 Render 的过程中我们知道，template 的编译在 $mount 方法中出现过。// src/platforms/web/entry-runtime-with-compiler.jsconst mount = Vue.prototype.$mountVue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean): Component { el = el && query(e ...

初六和家人出去玩，没写完博客。跳票了~ 所谓虚拟DOM，是一个用于表示真实 DOM 结构和属性的 JavaScript 对象，这个对象用于对比虚拟 DOM 和当前真实 DOM 的差异化，然后进行局部渲染从而实现性能上的优化。在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode。接下来我们一步步分析： VNode 是什么？ 既然是虚拟 DOM 的作用是转为真实的 DOM，那这就是一个渲染的过程。所以我们看看 render 方法。在之前的学习中我们知道了，vue 的渲染函数 _render 方法返回的就是一个 VNode 对象。而在 initRender 初始化渲染的 ...

早上好！继续开始学习Vue源码吧~ 在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。下面我们来看看源码~ 源码位置和之前一样，初始化的方法都是在 Vue 的 _init 方法中的。// src/core/instance/init.jsVue.prototype._init = function (options?: Object) { …… vm._self = vm initLifecycle(vm) initEvents(vm) initRender(vm) callHook(v ...

今天我们来学习下Vue的渲染 Render 源码~ 还是从初始化方法开始找代码，在 src/core/instance/index.js 中，先执行了 renderMixin 方法，然后在Vue实例化的时候执行了 vm._init 方法，在这个 vm._init 方法中执行了 initRender 方法。renderMixin 和 initRender 都在 src/core/instance/render.js 中，我们来看看代码： renderMixin首先来跟一下 renderMixin 的代码：export function renderMixin (Vue: Class<C ...

早上好！继续学习Vue源码~这次我们来学习 event 事件。 源码简析其实看了前两篇的同学已经知道源码怎么找了，这里再提一下。先找到Vue核心源码index方法 src/core/instance/index.jsfunction Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with ...

春节继续写博客~加油！ 这次来学习一下Vue的生命周期，看看生命周期是怎么回事。 callHook生命周期主要就是在源码某个时间点执行这个 callHook 方法来调用 vm.$options 的生命周期钩子方法（如果定义了生命周期钩子方法的话）。我们来看看 callHook 代码：export function callHook (vm: Component, hook: string) { const handlers = vm.$options[hook] // 获取Vue选项中的生命周期钩子函数 if (handlers) { for (let i = ...

一直想有个自己的 Github.io 博客，感觉逼格能够上升一大截。 很久之前就看到网上各种博客搭建的文章，但是从内心中总感觉好像是个很麻烦的事情。所以，一直没有动手去做。 昨天，趁着年前工作不忙，搭建了个博客，这里记录下过程。其实，搭建hexo博客是非常简单的事情。 安装前提Mac安装前提 Xcode Node.js Git 这三个玩意儿对于我们开发者基本都是有的，没有装个就好。 创建博客的过程简单的几条 bash 命令就好。$ npm install -g hexo-cli$ hexo init [文件夹名]$ cd [文件夹名]$ npm install 以上步骤就已经安装完毕了 ...