ssh
## 前言 在本系列的上一篇文章 [带你彻底搞懂Vue3的响应式原理！TypeScript从零实现基于Proxy的响应式库。](https://juejin.im/post/5e21196fe51d454d523be084)中， 我们详细的讲解了普通对象和数组实现响应式的原理，但是Proxy可以做的远不止于此，对于es6中新增的`Map`、`Set`、`WeakMap`、`WeakSet`也一样可以实现响应式的支持。 但是对于这部分的劫持，代码中的逻辑是完全独立的一套，这篇文章就来看一下如何基于函数劫持实现实现这个需求。 阅读本篇需要的一些前置知识： [Proxy](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) [WeakMap](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) [Reflect](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect) [Symbol.iterator](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) (会讲解) ## 为什么特殊 在上一篇文章中，假设我们通过`data.a`去读取响应式数据`data`的属性，则会触发Proxy的劫持中的`get(target, key)` target就是`data对应的原始对象`，key就是`a` 我们可以在这时候给key: `a`注册依赖，然后通过Reflect.get(data, key)去读到原始数据返回出去。 回顾一下： ```js /** 劫持get访问 收集依赖 */ function get(target: Raw, key:...
我们动态的往body节点上挂一个小球 并且更改它的top值 让它触发动画 （以下代码均在chrome控制台执行） ```js var div = document.createElement('div') div.style.cssText = 'position: fixed;width: 30px; height: 30px; left: 0; top: 0; background: red;transition: all 1s' document.body.appendChild(div) div.style.top = '500px' ``` 这样写是没用的，因为浏览器很聪明，它会把你在一次task中的样式更改收集起来，再执行渲染的时候再把它一次性改变，但是网上很多人说getComputedStyle这个api可以直接触发重绘，那么我们来试试...
## 前言 在 Vue 的官网中的过渡动画章节中，可以看到一个很酷炫的[动画效果](https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E7%9A%84%E6%8E%92%E5%BA%8F%E8%BF%87%E6%B8%A1)  乍一看，让我们手写出这个逻辑应该是非常复杂的，先看看本文最后要实现的效果吧，和这个案例是非常类似的。 ## 预览  也可以直接进预览网址里看： http://sl1673495.gitee.io/flip-animation 图片素材依然引用自知乎问题[《有个漂亮女朋友是种怎样的体验？》](https://www.zhihu.com/question/28997505)，侵删。 ## 分析需求 拿到了这个需求，第一直觉是怎么做？假设第一行第一个图片移动到了第二行第三列，是不是要计算出第一行的高度，再计算出第二行前两个元素的宽度，然后从初始的坐标点通过 CSS 或者一些动画 API 移动过去？这样做是可以，但是在图片不定高不定宽，并且一次要移动很多图片情况下，这个计算方法就非常复杂了。并且这种情况下，图片的坐标都需要我们手动管理，非常不利于维护和扩展。 换种思路，能不能直接很自然的把 DOM 元素通过原生 API 添加到 DOM 树中，然后让浏览器帮我们好这个终点值，最后我们再动画位移过去？ 在文档里我们发现一个名词：`FLIP`，这给了我们一个线索，是不是用这个玩意就可以写出这个动画呢？ 答案是肯定的，顺着这个线索找到 `Aerotwist`...
最近一段时间，Vue3带来的新能力composition-api带来了比较大的轰动，虽然是灵感是源React Hook，但是在很多方面却超越了它。但是除了composition-api，其他的改动却比较少有人讨论，本篇文章就由[vuejs/rfcs](https://github.com/vuejs/rfcs) 这个仓库来看看其他比较让人振奋的RFC。 RFC其实就是（Request For Comments）征求修正意见书，它不代表这个api一定会正式通过，但是却可以让社区知道vuejs团队正在进行的一些工作，和一些新想法。 Vue的RFC分为四个阶段： 1. Pending：当RFC作为PR提交时。 2. Active：当RFC PR正在合并时。 3. Landed：当RFC提出的更改在实际发行版中发布时。 4. Rejected：关闭RFC PR而不合并时。 本篇讨论的RFC都在[Active](https://github.com/vuejs/rfcs/tree/master/active-rfcs)阶段 ## 删除filters的支持 ```html {{ msg | format }} {{ format(msg) }} ```...
本着对社区的小伙伴们负责的态度，有些文章里应付面试用的一些讲解实在是看不下去。 本文针对 @小明同学哟 的 《前端常见的Vue面试题目汇总》 这篇文章，提出一些错误。 先放一张大图，有兴趣的同学可以点开图片看一下原文，简单来说就是写了很多不知道从哪里收集来的劣质总结，然后底下放个公众号骗粉丝。  且不说原文中每个答案都过于简略，并不能达到面试官的要求，其中还有很多错误的地方会误导读者，接下来我重点指出一下错误的地方。 这里不放原文链接的原因是我希望抵制这样的作者，这个作者的掘力值快要 5000 了，而掘金会对掘力值 5000 以上的作者进行文章首页推荐。如果以后首页都是这样的低质量文章，那真的很让人绝望。 另外比较可笑的是，昨天在这篇文章下提出了一些反驳的观点，今早一看这篇文章的评论区，已经被作者删的一干二净，只留下她的「水军号」的一条评论了。不禁唏嘘，直接删掉文章的反对观点来掩耳盗铃。  ## 准备开始 接下来开始针对作者文章中的观点进行逐条的反驳，注意「**引用**」 中的文字的即是作者原文，错别字我也原样保留了。 ## 请说一下响应式数据的原理 > 默认Vue在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性，当页面到对应属性时，会进行依赖收集(收集当前组件中的watcher)如果属性发生变化会通知相关依赖进行更新操作 收集当前组件中的watcher，我进一步问你什么叫当前组件的 `watcher`？我面试时经常听到这种模糊的说法，感觉就是看了些造玩具的文章就说熟悉响应式原理了，起码的流程要清晰一些： 1. 由于 Vue 执行一个组件的...
## 前言 瀑布流布局是前端领域中一个很常见的需求，由于图片的高度是不一致的，所以在多列布局中默认布局下很难获得满意的排列。 我们的需求是，图片高度不规律的情况下，在两列布局中，让左右两侧的图片总高度尽可能的接近，这样的布局会非常的美观。 注意，**本文的目的仅仅是讨论算法在前端中能如何运用**，而不是说瀑布流的最佳解法是动态规划，可以仅仅当做学习拓展来看。 本文的图片节选自知乎问题[《有个漂亮女朋友是种怎样的体验？》](https://www.zhihu.com/question/28997505)，我先去看美女了，本文到此结束。（逃 ## 预览  ## 分析 从预览图中可以看出，虽然图片的高度是不定的，但是到了这个布局的最底部，左右两张图片是正好对齐的，这就是一个比较美观的布局了。 那么怎么实现这个需求呢？从头开始拆解，现在我们能拿到一组图片数组 `[img1, img2, img3]`，我们可以通过一些方法得到它对应的高度 `[1000, 2000, 3000]`，那么现在我们的目标就是能够计算出左右两列 `left: [1000, 2000]` 和 `right: [3000]` 这样就可以把一个左右等高的布局给渲染出来了。 ## 准备工作 首先准备好小姐姐数组 `SISTERS`：...
## 前言 在我的上一篇文章[《前端电商 sku 的全排列算法很难吗？学会这个套路，彻底掌握排列组合。》](https://juejin.im/post/5ee6d9026fb9a047e60815f1)中详细的讲解了排列组合的递归回溯解法，相信看过的小伙伴们对这个套路已经有了一定程度的掌握（没看过的同学快回头学习~）。 昨晚正好在看字节跳动的招聘直播，弹幕里有一些同学提到了面试时候考到了「N 皇后」问题，他没有答出来。这是一道 LeetCode 上难度为 hard 的题目。 听起来很吓人，但是看过我上一篇文章的同学应该还记得我有提到过，我解决电商 sku 问题用的是排列组合的万能模板，这个万能模板能否用来解决这个经典的计算机问题「N 皇后」呢？答案是肯定的。 ## 问题 先来看问题，其实问题不难理解： n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上，并且使皇后彼此之间不能相互攻击。  上图为 8 皇后问题的一种解法。 给定一个整数 n，返回所有不同的...
## 前言 前段时间在掘金看到一个热帖 [今天又懒得加班了，能写出这两个算法吗？带你去电商公司写商品中心](https://juejin.im/post/5e778d34f265da5756327977)，里面提到了一个比较有意思故事，大意就是一个看似比较简单的电商 sku 的全排列组合算法，但是却有好多人没能顺利写出来。有一个毕业生小伙子在面试的时候给出了思路，但是进去以后还是没写出来，羞愧跑路~ 其实排列组合是一个很经典的算法，也是对递归回溯法的一个实践运用，本篇文章就以带你学习一个标准「排列组合求解模板」，耐心看完，你会有更多收获。 ## 需求 需求描述起来很简单，有这样三个数组： ```js let names = ["iPhone X", "iPhone XS"] let colors = ["黑色", "白色"] let storages = ["64g", "256g"] ``` 需要把他们的所有组合穷举出来，最终得到这样一个数组：...
Vue3 中，`ref` 是一个新出现的 api，不太了解这个 api 的小伙伴可以先看 [官方api文档](https://vue-composition-api-rfc.netlify.com/api.html#ref)。 简单介绍来说，响应式的属性依赖一个复杂类型的`载体`，想象一下这样的场景，你有一个数字 `count` 需要响应式的改变。 ```ts const count = reactive(2) // ❌ 什么鬼 count = 3 ``` 这样肯定是无法触发响应式的，因为 Proxy 需要对一个复杂类型上的某个属性的访问进行拦截，而不是直接拦截一个变量的改变。 于是就有了 `ref` 这个函数，它会为简单类型的值生成一个形为 `{ value:...
## 前言 高阶组件这个概念在 React 中一度非常流行，但是在 Vue 的社区里讨论的不多，本篇文章就真正的带你来玩一个进阶的骚操作。 先和大家说好，本篇文章的核心是学会这样的思想，也就是 `智能组件` 和 `木偶组件` 的解耦合，没听过这个概念没关系，下面会详细说明。 这可以有很多方式，比如 `slot-scopes`，比如未来的`composition-api`。本篇所写的代码也不推荐用到生产环境，生产环境有更成熟的库去使用，这篇强调的是 `思想`，顺便把 React 社区的玩法移植过来皮一下。 **不要喷我，不要喷我，不要喷我！！**，此篇只为演示高阶组件的思路，如果实际业务中想要简化文中所提到的异步状态管理，请使用基于 `slot-scopes` 的开源库 [vue-promised](https://github.com/posva/vue-promised) ## 例子 本文就以平常开发中最常见的需求，也就是`异步数据的请求`为例，先来个普通玩家的写法： ```xml failed to load loading... hello...