1.Vue动态响应

• ①数据动态响应式是Vue的核心思想之一，动态响应可以简单理解为：数据更新→视图更新；视图更新→数据更新，这里的数据分为对象和数组；
• ②对象：Vue处理对象的方式是通过Object.defineProperty劫持数据，通过getter和setter来处理；

• ③数组：通过劫持数组的原型方法；将所有可能使得数组产生变化的方法劫持，当数据调用这些方法的时候，dep.notify()，会通知依赖于此数据的视图update();但是这样做会产生2个问题，如下：

  ['push','pop','shift','unshift','splice','sort', 'reverse'] .forEach(function (method) {const original = arrayProto[method]def(arrayMethods, method, function mutator (...args) {const result = original.apply(this, args)     ……//通知变化ob.dep.notify()return result})})

2.看看几个案例

• ①通过this.arr[index] = newValue赋值的方式不能更新视图；

• ②通过this.arr.length = 0,通过改变数组长度去改变数组，视图也不能更新；

  ①②虽然没有更新视图但是需要明白的是this.arr的数据是改变了的，只是没有通知依赖的数据更新；这是由于Vue没有做相应的处理。

  {
       {item}}
  Click Medata: {arr: [1, 3, 4, 5, 6],},       methods: {           change: function () {               this.arr[1] = 0;               this.arr.length = 0;}}

• ③混合方式

  若是①②和数组劫持了的方法一起使用，前面两种方法是起作用的；下图方法一和方法二的结果是不一样的，如下图所示，这也说明了在①和②中，数据是改变了的，只是视图没有更新。

  //方式一change: function () {             this.arr[1] =0;             this.arr.reverse()}//方式二change: function () {             this.arr.reverse()             this.arr[1] =0;}