Vue 源码
文章平均质量分 67
tanleiDD
这个作者很懒,什么都没留下…
展开
-
Vue 源码学习 —— AST 抽象语法树形成
AST 理解 AST 跟 虚拟DOM 的关系 手写简单源码 目录结构: parse.js: // 处理原始串,去除换行跟空格 function trimAll (str) { let strList = str.split('\n') strList = strList.map(s=>s.trim()) return strList.join('') } // 解析属性字符串 function parseAttrs (attrsStr) { attrsStr原创 2021-04-26 11:41:40 · 357 阅读 · 0 评论 -
Vue 源码学习 —— 数据响应式原理 (Vue 2.x)
对象的响应式 目录结构: 执行关系: observe.js import Observer from './Observer' export default function observe (value) { // 如果 value 不是对象,则不处理 if (typeof value != 'object' || !value) return var ob if (value.__ob__) { ob = value.__ob__原创 2021-04-24 12:20:59 · 308 阅读 · 2 评论 -
Vue 源码学习 —— snabbdom 虚拟 DOM 和 diff 算法原理
前言 snabbdom 是著名的虚拟DOM库,是 diff 算法的奠基者,Vue也借用了它的思想 因此,在学习Vue的虚拟DOM和diff算法之前,先学习snabbdom能加更容易理解其设计思想 snabbdom 安装snabbdom npm i -S snabbdom webpack环境配置 webpack安装 npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 目录: webpack.config.js module.原创 2021-04-16 13:24:02 · 489 阅读 · 3 评论 -
Vue 源码学习 —— Mustache 模板引擎原理
前言 Mustache 是模板引擎思想的奠基者,Vue 中的模板引擎也借用了它的思想 因此,在学习Vue的模板引擎之前,先学习Mustache能加更容易理解模板引擎的设计思想 Mustache 下载:到 BootCDN 搜索 mustache,复制链接到浏览器打开,并保存到本地即可 或使用该链接:mustache.js(v4.1.0) 引入: 基本使用: 渲染普通对象: <div id="root"></div> <script src="js/mustache原创 2021-04-14 22:41:15 · 517 阅读 · 0 评论