上一篇是mount之前的添加一些方法,包括全局方法gloal-api,XXXMixin,initXXX,然后一切准备就绪,来到了mount阶段,这个阶段主要是 解析template 创建watcher并存入Dep 更新数据时更新视图 Vue源码里有两个mount 第一个 // src/platform/web/runtime/index.js Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean…

阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先把它干掉. 编译器代码藏在哪 前面已经提到,Vue 项目中的 entry-runtime.js 文件是 Vue 用于构建 仅包含运行时 的源码文件,而 entry-runtime-with-compiler.js 是用于构建 同时包含编译器和运行时 的全功能文件.因此两个文件的差集必然就是编译器实现…

阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST 的具体过程.这对 Vue 的使用通常没什么帮助,但熟悉这个过程会对 Vue 的内部工作原理有更清晰的认识. 主代码位置:Vue 项目的 src/compiler/parser/html-parser.js 文件. AST 节点定义 AST 是由一个个节点组成的,正如 DOM 树是由 DOM 节点组成…

阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 Vue 源码做简化处理,探究 Vue 是如果根据 AST 生成所需要的 render 函数的. 优化 AST 优化 AST 的目的是优化整体性能,避免不必要计算.比如那些不存在数据绑定的节点,即纯静态的(purely static)在更新视图时根本不需要改变,因此在数据批处理,页面重渲染时可直接跳…

阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 Vue 源码做简化处理,探究 Vue 是如果根据 AST 生成所需要的 render 函数的. 优化 AST 优化 AST 的目的是优化整体性能,避免不必要计算.比如那些不存在数据绑定的节点,即纯静态的(purely static)在更新视图时根本不需要改变,因此在数据批处理,页面重渲染时可直接跳…

Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一些疑问,可能官网上只会建议你这么做,但是核心实现我们可能并不知道.比如: v-for key 是如何达到"就地复用"策略 数组更新检测是如何完成的 set 为什么就能动态添加根级别的响应式属性 为什么Vue可以跨平台支持weex,以及后来出现的mpvue ... 其次,很久没有更新内容了,…

Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一些疑问,可能官网上只会建议你这么做,但是核心实现我们可能并不知道.比如: v-for key 是如何达到"就地复用"策略 数组更新检测是如何完成的 set 为什么就能动态添加根级别的响应式属性 为什么Vue可以跨平台支持weex,以及后来出现的mpvue ... 其次,很久没有更新内容了,…

如果我们不用单文件组件开发,一般直接<script src="dist/vue.js">引入开发版vue.js这种情况下debug也是很方便的,只不过vue.js文件代码是rollup生成的 这种情况下debug,看源码也是很方便的 但是如果能够在vue项目中的src目录下中的文件打断点调试就更好了.那怎么做到呢? 其实很简单1. 打开 build/config.js 文件 找到 genConfig() 函数 该函数下有个config对象,给该对象添加一个属性和值: sou…

特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 Vue 源码解读(4)-- 异步更新 最后说到刷新 watcher 队列,执行每个 watcher.run 方法,由 watcher.run 调用 watcher.get,从而执行 watcher.getter 方法,进入实际的更新阶段.这个流程如果不熟悉,建议大家再去读一下这篇文章. 当更新一个渲染…

VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后出不来~ 从package.json文件知道我们在执行命令npm run dev(只是以dev为例prod一样) 对应的是config.js文件里面的web-full-dev,然后找到config.js文件 config.js 'web-full-dev': { entry: resolve('we…