【Vue2.x】vue2 响应式的理解

vue2给对象动态添加响应式属性

vue2里对象的响应式是通过Object.defineProperty()实现

保持响应式的关键是不允许直接赋值修改data里定义对象（数组），因为直接赋值断了vue.js 对对象（数组）的引用，使其失去响应式

1. 对象响应性

1.1 操作对象单个属性

使用Vue.set()或this.$set()

• 第一个参数，是目标对象
• 第二个参数，是要添加的属性名字
• 第三个参数，是要属性值

1.2 给对象批量添加响应式属性

• Object.assign() 直接覆盖同名key到原对象上，保持响应式

• 扩展运算符 不推荐，不过会新建一个对象。

  tips：有人不理解，为什么扩展算符新建了一个对象再赋值难道不会断开vue对其的引用吗？
  扩展运算符新建的对象是源对象的浅拷贝，所以有引用关系，等于你使用扩展运算符实现对象的响应式，中间又会多一层引用，不推荐。

2. 数组响应式

数组不推荐使用vue提供的set方法

2.1 操作数组单个数据

• push()：向数组末尾添加一个或多个元素，并返回新的长度。
• pop()：删除并返回数组的最后一个元素。
• shift()：删除并返回数组的第一个元素。
• unshift()：向数组的开头添加一个或多个元素，并返回新的长度。
• splice()：删除现有元素并/或添加新元素。
• sort()：对数组的元素进行排序。
• reverse()：颠倒数组中元素的顺序。

2.2 对数组进行批量替换

• arr.splice(0,arr.length,...target)