vue 源码学习
李思岐
密云不雨,自我西郊
展开
-
Vue 源码分析step_3-new Vue 之前发生了什么?
我们采用 HTML 模板的方式,引入带编译器的vue.js<script src="./vue.js"></script><div id="app"></div>我们先不调用 new Vue,只是引入 vue,看看会发生什么?在 vue 源码中,我们看到文件中执行了一系列方法// 给 Vue 原型挂载_init 方法initMixin(Vue)// 给 Vue 原型挂载$data $props $set $delete $watc原创 2020-09-26 15:30:34 · 368 阅读 · 0 评论 -
Vue 源码分析step_3-watch 和 computed
watch 的实现 Vue.prototype.$watch = function ( expOrFn, cb, options ) { const watcher = new Watcher(vm, expOrFn, cb, options) return function unwatchFn() { watcher.teardown() } }watch 的实现其实是把第一个参数设置成了响应式对象,watcher 构造函数原创 2020-09-25 22:31:12 · 309 阅读 · 0 评论 -
vue 源码分析 step_2-渲染函数如何生成 Vnode并最终生成真实 DOM?
我们知道经过编译器生成的代码字符串,最终要通过渲染函数 createElement 生成 Vnode,也知道编译生成的代码字符串会有_f,_m,_v,_c...的特征export function createComponent ( Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>,原创 2020-09-25 21:20:53 · 346 阅读 · 0 评论 -
vue 源码分析 step_2-组件更新时候,diff 的对象从何而来?
已经知道了早初始化过程中,在update 方法里面间接调用了___patch__去更新,那么在今后的更新过程中,新老 Vnode 都存在,那么这些新老的 Vnode 是从哪里来的呢?来看一下 update 的源码 Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) { ... const prevVnode = vm._vnode vm._vnode = vnode ... .原创 2020-09-25 17:13:36 · 113 阅读 · 0 评论 -
vue 源码分析 step_2-初始化过程中的真实 DOM 是如何生成的?
在之前的分析中,我们知道在完全版本的 Vue 中,最终会通过编译生成代码字符串。那为什么生成了代码字符串就能有真实 DOM 出呢?可能会想到因为调用了 mounted 方法,那么 mounted 方法内部又是如何生成 DOM 的呢?找到 monte的实现:/* @flow */import Vue from 'core/index'import { mountComponent } from 'core/instance/lifecycle'import { inBrowser } fro原创 2020-09-25 14:47:28 · 102 阅读 · 0 评论 -
vue 源码分析 step_2-编译器
在前面知道,在完全版本的 Vue 中,比运行时版本多了一个编译器。 const { render, staticRenderFns } = compileToFunctions(template, { outputSourceRange: process.env.NODE_ENV !== 'production', shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters:原创 2020-09-24 22:13:41 · 205 阅读 · 0 评论 -
Vue 源码分析step_1 - 源码层面的 Vue 实例
顾及到使用 Vue 的所有场景,今后分析的版本全部为完全的 vue 版本,即带编译器的版本。在 entry-runtime-with-compiler.js 中,有这么一个代码:// 引入 Vue 构造函数供外部使用import Vue from './runtime/index'//引入编译函数import { compileToFunctions } from './compiler/index'在对 Vue 版本以及版本之间的区别有一个较浅的认识之后,接下来分析 import Vue原创 2020-09-21 14:38:59 · 135 阅读 · 0 评论 -
Vue 源码分析step_1 -compileToFunctions是什么?
顾及到使用 Vue 的所有场景,今后分析的版本全部为完全的 vue 版本,即带编译器的版本。在 entry-runtime-with-compiler.js 中,有这么一个代码:// 引入 Vue 构造函数供外部使用import Vue from './runtime/index'//引入编译函数import { compileToFunctions } from './compiler/index'compileToFunctions是什么?顺着引入文件的路径往下找,在源码的编译原创 2020-09-21 11:27:06 · 287 阅读 · 0 评论 -
Vue 源码分析step_1-import Vue 的时候发生了什么?
顾及到使用 Vue 的所有场景,今后分析的版本全部为完全的 vue 版本,即带编译器的版本。在 entry-runtime-with-compiler.js 中,有这么一个代码:// 引入 Vue 构造函数供外部使用import Vue from './runtime/index'//引入编译函数import { compileToFunctions } from './compiler/index'import Vue 的时候发生了什么?打开'./runtime/index'/*原创 2020-09-21 11:06:50 · 170 阅读 · 0 评论 -
vue 源码分析 step_1-runtime与runtimeWithCompiler
源码地址:vuejs/vue1.体验vue 的两种方式工程化项目中,webpack结合 vue-loader 的情况, 非工程化项目中HTML 文件中引入 CDN这两种情况对应了vue的 runtime 与runtimeWithCompiler两个版本--------------------------------------------------------------------------------------------需要发布版本时,需要运行package.json 中的n原创 2020-09-20 21:42:22 · 338 阅读 · 0 评论