vue响应式原理，数据双向绑定，vue2缺陷解决方法

MVVM框架：

 MVVM是一种设计思想，M是model代表数据模型，V是Ul模板，是展示视图。Vm是viewmodel,是一个桥梁，数据和视图本无关联，vm作为桥梁为两者建立关系，能够实现vue响应式，数据变化视图更新，视图更新数据变换，两者自动同步。通过viewmodel我们无需再人为去亲自操纵dom元素，我们只需要要关注业务代码逻辑的实现即可。

响应式原理：通过发布者-订阅者模式+数据的双向绑定实现

vue2是借助object.defineproperty实现的响应式，具体实现通过以下几个步骤：

初始化阶段：首先observer遍历data中所有的属性，通过object.defineproperty为这些属性都转化为getter/setter，进行数据劫持，实现数据双向绑定以便对能监视到数据。

依赖收集阶段：首先组件初始化的时候会创建watcher实例，然后解析模板时将模板表达式转为对应的watcher实例，并且在读取模板时调用getter方法时会将对应的watcher实例添加至对应的dep容器列表中。

响应更新阶段：当数据源中的data被我们自己人为改变，setter方法会被调用，dep.trigger会被触发会通知dep依赖列表中的watcher实例，watcher就会调用相应的方法去更新数据然后重新生成虚拟dom更新渲染模板。

vue2中的数据双向绑定：通过object.definepropetry实现，对数据进行绑定getter和setter方法，当读取或者修改数据时能够捕获到数据发生变化，视图时通过vm去更新不需要人为去操作dom，v-model一般用于表单实现数据的双向绑定视图数据更新。

数据双向绑定和响应式原理之间的关系：

首先响应式原理包含数据双向绑定，除了数据双向绑定外还添加了一个订阅发布者模式。其次更新视图原理不同，数据双向绑定虽然能更新视图，但是它的范围小只能去实现表单的绑定，还有还需要借助其他api如viewmodel去实现更新视图。而响应式原理是通过订阅者发布模式去更新视图不需要借助其他手段，而且范围广适合整个模板的更新不局限表单。

vue2中的响应式原理存在一些缺陷：

1，object.defineproperty无法监听数组的下标，只能监听对象，也就是无法实现数组的响应式监听，对于vue2中的数组不可以之间利用数组下标去改变值，只能通过vue2中为我们封装改写了的7种方法去为数组去改变值。

7种方法分别为：1，push（）在数组尾部添加新元素，返回数组的新长度       2，pop()在数组的尾部删除元素，返回的是删除的元素           3，shift（）在数组的头部删除元素，并返回删除的元素       4， unshift（）在数组的头部插入新元素，并返回新长度的值             5，splice（）删除或替换或添加元素，返回的是被删除的元素             6，sort（）对数组元素进行排序          7，slice（）返回数组的浅拷贝 

2，由于object.defineproperty需要对预定义的对象属性才能响应式处理，所以无法追踪通过object.definepropetry外添加或删除的属性，所以如果需要实现响应式处理监听必须要事先在data中定义好，不过在vue2中也为我们提供了一种解决方法就是用vue.set()方法去添加，vue.delete()去删除。

3，vue2响应式基于给对象内每个属性设置getter/setter方法，对于复杂的对象，需要多层级为其配置getter/setter实现深度监听，而开启深度监听本身就是一个比较性能事，在大型的应用中会存在性能问题。