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 · 369 阅读 · 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 · 348 阅读 · 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 · 103 阅读 · 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 · 206 阅读 · 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 · 139 阅读 · 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/vue 1.体验vue 的两种方式 工程化项目中,webpack结合 vue-loader 的情况, 非工程化项目中HTML 文件中引入 CDN 这两种情况对应了vue的 runtime 与runtimeWithCompiler两个版本 -------------------------------------------------------------------------------------------- 需要发布版本时,需要运行package.json 中的n原创 2020-09-20 21:42:22 · 338 阅读 · 0 评论