vue响应式

vue 基于 Object.defineProperty 实现了响应式，在 vue 实例创建的时候，vue 会遍历 data 中对象的所有属性(property)，把这些 属性 全部转为 getter/setter。然后Vue 通过 getter/setter 追踪数据的变化。

对象数组变化为什么不能渲染?

但是Object.defineProperty本身也存在问题，就是对于后期为对象添加的新的属性，因为没有添加 getter 和 setter，所以Vue就无法追踪，导致我们明明在代码中为data 中的某个对象新增了一个属性，视图中却没有变化
对于数组，也存在类似问题，就是 Vue无法检测到通过索引为数组设置的新元素，以及当属于长度发生变化时Vue 也无法检测到

对象、数组怎么修改并且才能实现渲染？

Vue.set 方法向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新

// this.$set(对象,'属性',值)
this.$set(this.person,'name','oldCode')
// 或者
Vue.set(this.person,'name','oldCode')
// 为数组person添加 this.$set(数组,索引,值)
this.$set(this.person,2,'oldCode')

扩展

• 在 vue2 中虽然后期为对象添加的属性，不是响应式的，视图中不会显示，但是如果是在 created 钩子函数中添加的新的属性，就是响应式的
• 自定义函数中向对象添加新的属性，不是响应式的，视图也不会显示，但是如果在次行代码之前加入 更新对象其他属性的代码，新属性就成为响应式的了