Vue是怎样监听数组的变化的？

上周五跟着一个师姐面试一个三年工作经验的前端开发，我在一边谨慎的观摩。想着曾经我也被别人面试过，如今面试别人，感觉其实心情是一样的。

前言

• 工作三年的Vue使用者应该懂什么？
• 为何工作几年的基础越来越弱？
• 工作如何挤出时间学习？

一道面试题

其实我们并不是要你把答案都记下来，而是把其中的思想学习到。就像你接触一个新的领域react，你也一样可以把基本思想提炼出来。

面试题： 👂Vue是如何对数据进行监听的？

这其实是老生常谈的问题，但凡你有一点基础知识，你也能答出一二。师姐跟我说，其实问题不只是问题本身，而是跟这个知识顺带出来的体系。📝

01 对象数据是怎么被监听的

在vue2.x版本中，数据监听是用过Object.defineProperty这个API来实现的，我们可以来看一个例子🌰

var text = 'vue';
const data = {
   };
Object.defineProperty(data, 'text', {
   
    get() {
   
        return text;
    },
    set(newVal) {
   
        text = newVal;
    }
});
data.text // 'vue'
data.text = 'react' // 'react'

当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。我们当然可以在触发函数的时候做我们自己想做的事情，这也就是“劫持”操作。

在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作，并创建一个监听器，当数据发生变化的时候发出通知。

var data = {
   
    name:'hello',
    age:18
}

Object.keys(data).forEach(function(key){
   
    Object.defineProperty(data,key,{
   
        enumerable: