vue 遇坑记录

• vue 修改对象属性页面不渲染：因为Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

eg:
 var person = {
    name: 'test',
    get name() {
        return this.name
    },
    set name(val) {
        this.name = val
        console.log("触发了set")
    }
}

person.name
=> test
person.name = 111
=> 111
person.name.name = 222
=>不会有打印信息，因为未被监听

------

官方解释：
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，
Vue 将遍历此对象所有的属性，并使用Object.defineProperty
把这些属性全部转为getter/setter。Object.defineProperty
是ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持IE8
以及更低版本浏览器的原因。 用户看不到getter/setter，但是在
内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化.这里
需要注意的问题是浏览器控制台在打印数据对象时getter/setter
的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加
友好的检查接口。 每个组件实例都有相应的 watcher实例对象，
它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter
被调用时，会通知 watcher重新计算，从而致使它关联的组件得以更新。