# Vue2 响应式原理

学过 Vue2 的话应该知道响应式原理是由 Object.defineProperty 对数据进行劫持，再加上订阅发布，实现数据的响应的。

Object.defineProperty 存在以下几个方面的缺点。

1. 初始化的时候需要遍历对象的所有属性进行劫持，如果对象存在嵌套还需要进行递归。导致初始化的时候需要消耗一些资源用于递归遍历。
2. 从上面可以推导出 Vue2 对于新增、删减对象属性是无法进行劫持，需要通过 Vue.set、Vue.delete 进行操作。
3. 每个调用者会生成一个 Watcher，造成内存占用。
4. 无法劫持 Set、Map 对象。

# 搭建调试环境

为了弄清楚 Vue3 的初始化，建议先克隆 Vue3 到本地。

git clone https://github.com/vuejs/vue-next.git

安装依赖

npm install

虽然迟了一天，但还是祝各位小伙伴端午安康。

最近因为端午节到来，物业举办了一个网页小游戏，得分最高的前 N 名可以拿到奖品。

闲来无事的我参加了一下，发现自己实在是太菜了，总是玩不过别人，于是转变思路，研究看看这个小游戏是如何提交分数的。

前段时间遇到一个需求，需要画一个 7日年化利率 的曲线图。

UI 提了几个需求，说实话，一开始看到时都懵逼了，然后我回了句 “你说，我不一定实现。”

一开始看了网上的一些开源图表，看是能实现，但是又觉得比较重，没必要为了一个图表而引入整个库。而后下定决心自己撸一个。

最近这段时间下班回家之后一直在写小程序，导致了最近很长一段时间都没更新文章，刚好利用这次假期，总结一下这段时间的工作。

面试的时候，面试官经常会问 Vue 双向绑定的原理是什么？我猜大部分人会跟我一样，不假思索的回答利用 Object.defineProperty 实现的。

其实这个回答很笼统，而且也没回答完整？Vue 中 Object.defineProperty 只是对数据做了劫持，具体的如何渲染到页面上，并没有考虑到。接下来从初始化开始，看看 Vue 都做了什么事情。

Vue 的 computed 经常会用到，其中包含以下两个重点：

1、 computed 的计算结果会进行缓存；

2、只有在响应式依赖发生改变时才会重新计算结果。

接下从源码的出发，看看能不能验证这两个重点。为了能更好理解 computed 的实现，文章字数会比较多，请耐心阅读。

前端面试的时候，经常能看到这样一道题，实现一个Promise。

这篇文章将一步步实现 Promise，彻底弄懂 Promise。

最近看了面试题中有一个这样的题，v-for 为什么要绑定 key？

Vue 中 key 很多人都弄不清楚有什么作用，甚至还有些人认为不绑定 key 就会报错。

其实没绑定 key 的话，Vue 还是可以正常运行的，报警告是因为没通过 Eslint 的检查。

接下来将通过源码一步步分析这个 key 的作用。

最近因为公司项目需要搭建一个私服 npm，安排我来研究，这两天也踩了不少坑，于是记录下踩坑经历，避免小伙伴们踩坑。