vue在数组追加新的数据_前端高手之路 从Vue源码看数据劫持之「数组」响应原理...

点击右上角的关注，不定期前端干货分享！！

vue源码分析之数组响应

前段时间有句话特别火，【哪有什么岁月静好，只不过有人在我们负重前行！】那么这句话类比到编程界同样适用。不信接着往下看。

今天继续来说说前端利器Vue，其在国内火热程度依然不减当年，几乎每个前端高手之路绕不过去的框架。接下来我说说今天的主题Vue如何兼听数组的变化。

没读过源代码之前，我相信很多人和我一样，认为数组的push,pop等操作本身就支持数据响应。为了验证这一点，我们做个实验就知道了。

我们知道Vue2.x是通过Object.defineProperty()；方法来实现数据劫持响应的。那么原生js是如何劫持数据的呢？看：

vue数据劫持最基本的实现方式

从上面的运行结果我们可以看到，只有当我们给name赋值数组的时候，set方法才会被触发，而当我们后面操作这个数组的方法去改变这个数组的时候，set并没有被触发！！！

But, 我们回过头来写Vue 的时候，我们去给数组push,pop等一系列的操作，都会影响视图的更新。由此我们可以得出结论，尤大神肯定给广大开发者做了处理了吧，带着这个疑问，我接下来带你们去看看关于这一块儿的源代码的实现吧。

文件在vue/src/core/observer/array.js 我们可以看到，数组的常用几个方法已经被手动处理了，光看这一块的代码我们可能不太理解，没关系啊，我们只需要看关键的42行。有一个ob.dep.notify(); 也就是说，当数组触发了[ 'push', 'pop', 'shift','unshift','splice','sort','reverse']这些方法的时候。Vue会去调用notify方法(有看过Vue源代码的童鞋应该知道这个方法就是通知我们的Watcher要去更新视图了)。我们可以大概的认为Vue帮我们拦截了数组的操作方法。从而实现了数组变化触发视图更新了。而这数组这些在Obeject.defineProperty上面的坑在vue2.x中已经被填好，那么在3.0中，这个问题将不存在了。数据的劫持用到的ES6的 Proxy 进行拦截。具体的可以参考我之前写的 Vue2.x 与Vue3.x 双向数据绑定区别 一文。

一个框架之所有流行。是因为他永远考虑的比普通的使用者更长远全面、而当我们回过头去查阅那引起大神们的源代码的时候，不得不由衷的感叹佩服。

所以前端高手成长之路可以说，源代码分析阅读是绝对绕不开的。官方的文档只会教开发者如何使用，却从不会说为何要这样做，为何可以这样做！后面的文章我将继续推出Vue系列源代码分析，敬请期待。

未完待续。。。