blog
blog copied to clipboard
AnnVoV
# Vue2中Dep， Observer 与Watcher 之间的关系(不含patch部分)   ## 最简单的理解 按照我原先最简单的想法，我们既然给data 进行了defineProperty设置了getter和setter，为什么我们还需要依赖收集呢？为什么要引入Dep与Watcher? ## 为什么要引入依赖收集 * 例子1： ```javascript new Vue({ template: ` text1: {{text1}} text2: {{text2}} `, data: { text1: 'text1', text2:...
参考资料： 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，为什么会有两个，前者与后者的区别是什么呢？ * 维护模块列表的映射配置是放置在了哪里的，我们是不是要抽取出来？...
## 什么是puppeteer? ## puppeteer 可以用来干什么？ puppeteer 可以帮我们做很多事情，比如：UI自动化测试，性能分析等。 ## puppeteer 模拟登录我遇到的几个问题，以及如何解决的？ * 我想要不停的切换登录信息,我要复用我的chrome, 所以我要存下我的 websocketUrl * 我要复用socketUrl, 我有一个主脚本main.js 和一个传入用户参数的脚本b.js ， 我需要把我的账号信息传递给main.js * 所以这就变成了： * 1.我要在脚本a.js 与脚本main.js 之间传递我的用户名和密码参数 * 2.我的main.js在发现有a.js 这种用户脚本连上时，需要监听到，并且把它连上之前的websocketUrl *...
去求排列组合这种的思路，其实就是用有限的元素去构造一棵树的过程，然后你把这棵树打印处理。所以我之前存在的一个错误的地方就在于我忘记了去保留树的最顶部的那个根。 * 其实很简单，如果你要的最终结果是数组，你根部就放一个[]数组，如果你要的结果是字符串，你根部就放一个’'。 * 关于打印这棵树的子树，其实只要把子树的根节点都记录下来，打印出来就可以了 ### 看2个例子： ### 1.列出['b', 'a', 'o'] 三个元素可以形成的所有的排列组合字符串 ```javascript bao boa abo aob oba oab ``` 思路： 树的根是'', 一开始子树的根是b/a/o 子树的叶子为其剩下的元素 ```javascript function getArrGroup(arr) { let result...