annvov
annvov
## 疑问 1.当我修改了属性值时，vdom立即进行diff,重新渲染视图了吗？ 2.如果1是对的，那重复修改，性能岂不是很差？如果不是，1是如何实现的？ 3.我们的nextTick 具体的实现是怎样的？什么时候需要用到它？ 4.vdom diff的过程是怎样的？ ## 梗概 关于vue数据更新渲染的几个知识点，先列一下： * 数据的更新是实时的，但是渲染是异步的。 * 一旦数据变化，会把在同一个事件循环event loop中的观察到的watcher 推入一个队列（相同watcher实例不会重复推入） * DOM并不是马上更新视图的（想想也不可能，改动一次数据更新一次视图，肯定都是批量操作DOM的），vue 中的nextTick 用到了MicroTask和MacroTask，这需要我们去了解event loop（推荐先阅读下：[Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) ） * 整个script是一个主任务, setTimeout...
## patch 方法骨架 ```javascript return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) { ... if(isUndef(oldVnode)) { // empty mount (likely as component), create new root element isInitialPatch = true;...
# Vue2中Dep， Observer 与Watcher 之间的关系(不含patch部分)   ## 最简单的理解 按照我原先最简单的想法，我们既然给data 进行了defineProperty设置了getter和setter，为什么我们还需要依赖收集呢？为什么要引入Dep与Watcher? ## 为什么要引入依赖收集 * 例子1： ```javascript new Vue({ template: ` text1: {{text1}} text2: {{text2}} `, data: { text1: 'text1', text2:...
阅读 https://github.com/xufei/blog/issues/42 真的很有启发
参考资料： 1.Renderless Tags Input w/Multiple Layouts https://codepen.io/adamwathan/pen/qorebJ 2.（译）函数式组件在Vue.js中的运用 https://juejin.im/post/5c2d7030f265da613a54236f#heading-15 3.Renderless Components in Vue.js https://adamwathan.me/renderless-components-in-vuejs/（2的原文链接） ## 前言 之前就看过这个概念，但是一直没有很好的能理解，并且在业务中也一直觉得使用Mixin似乎也能达到想要的效果。后来看到《函数式组件在Vue.js中的运用》这篇文章，觉得受到了一点启发。 ## Renderless Component 意味着什么 可复用性比较高的组件 = 展示UI + 交互行为Action + 数据 Data 尤其在前台活动中，如果有一类组件除了UI上长的不太一样，交互上有一些细微的差别，那么我们就可以往这个公式上靠。...
## 疑问 1.当我修改了属性值时，vdom立即进行diff,重新渲染视图了吗？ 2.如果1是对的，那重复修改，性能岂不是很差？如果不是，1是如何实现的？ 3.我们的nextTick 具体的实现是怎样的？什么时候需要用到它？ 4.vdom diff的过程是怎样的？ ## 梗概 关于vue数据更新渲染的几个知识点，先列一下： * 数据的更新是实时的，但是渲染是异步的。 * 一旦数据变化，会把在同一个事件循环event loop中的观察到的watcher 推入一个队列（相同watcher实例不会重复推入） * DOM并不是马上更新视图的（想想也不可能，改动一次数据更新一次视图，肯定都是批量操作DOM的），vue 中的nextTick 用到了MicroTask和MacroTask，这需要我们去了解event loop（推荐先阅读下：[Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) ）  * 整个script是一个主任务,...
```javascript const flatten = (array) => { return array.reduce((accumulator, currentValue) => { if (!Array.isArray(currentValue)) { accumulator.push(currentValue); return accumulator; } else { const res = flatten(currentValue); accumulator = accumulator.concat(res); return accumulator;...
## JSON.stringify 不能处理哪些类型 阅读资料： What you didn’t know about JSON.Stringify https://abdulapopoola.com/2017/02/27/what-you-didnt-know-about-json-stringify/ 最主要的原因在于: > Because JSON is a language agnostic format JSON 是通用的文本格式和语言是无关的。如果函数定义也可以stringify的话，那就变得和语言有关了 ## JSON.stringify ```javascript const getType = (obj) =>...
## 前言 上一篇写了通过写babel插件来入门ast, 在组内分享的时候，有同学说是不是可以写一个判空的插件呢？ 把```a.b``` => ```a && a.b```呢？我觉得是的，这完全可以做呀！然后就尝试着在分享后写了一个。 ## 在线示例： https://astexplorer.net/#/gist/a54996b88a3fd57b65dbd9f2a14b4c91/fd5dbe0ea9ca616226980861f9d81e0984568753 ## 转换前: ``` var change = babelCheckEmpty(a.b.c.d); var notChange = d && d.e; ``` ## 转换后 ``` var...
这是一篇阅读笔记，重点推荐阅读下面3篇文章： 1.Predictable long term caching with Webpack https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31 2.手摸手合理地带你使用webpack4 上 https://segmentfault.com/a/1190000015919863 3.手摸手带你合理使用webpack4 下 https://segmentfault.com/a/1190000015919928 我的总结： * 首先要了解webpack 打包的基本原理，知道webpack里面使用自增的id 来标记模块, 可以回顾下之前的文章写一个mini webpack * 模块的增加或者删除会导致id的变化，所以引发了就算添加了[chunkhash]也未达到预期缓存的问题 * webpack4 有了nameModulesPlugin 和 hashedModuleIdsPlugin，为什么会有两个，前者与后者的区别是什么呢？ * 维护模块列表的映射配置是放置在了哪里的，我们是不是要抽取出来？...