vue响应式的原理

1.js中的对象

• 在es5里呢，js对象呢有一个特性，就是可以进行set和get
• 何为set和get呢
• 所谓set，就是可以在set中检测到对象某个属性值是否改变了，只要对象的属性值改变就会触发它
• 而get呢，可以在get里面进行数据的拦截处理，比如说我一个对象里有一个code值为123，我在set里把它重赋值为456，那么我第一次访问这个对象里的code时，他就是重赋值的456

2.vue响应式

• 而vue就利用了对象的set和get特性（就是可以检测到数据改动），将普通对象变成响应式对象
• vue初始化数据之后，会对所有的数据进行一个遍历处理，给每一个数据加上set和get，是用的object.defineproperty这个方法，组成一个watcher实例
• 当数据变化的时候，就会触发set，通知watcher去更新视图
• 值得一提的是在vue2中如果通过下标的方式去修改数组视图不会更新，这是因为在将普通对象变成响应式对象的过程中，会先判断这个数据是不是数组，如果是数组就不会给他添加set和get，这主要是为了vue的性能考虑,当然,为了处理这个问题,vue的团队重写了数组push等方法