由于 vue 入门极其简单，以至于我们很容易忽略 data 的定义 和 操作带来的坑

data() {
  return {
    obj: {}
  }
},
mounted: {
  // 以下 3 种使用方式 视图更新
  // 1
  this.obj = { a:1, b: 2 }
  // 2, 等价于 1
  this.obj = Object.assign({}, this.obj, { d: 4 })
  // 3
  this.$set(this.obj, 'e', 5)
  
  // 以下 3 种使用方式，视图不会更新
  // 1
  this.obj.c = 3
  // 2
  Object.assign(this.obj, { d: 4 })
  // 3
  this.obj = Object.assign(this.obj, { d: 4 })

  // 注意：即使 obj 里面有些 key 是 object 或 array 也正常
  this.obj =  { object: { a: 3, b: 4, arr: [1,2,3] }, array: [1, 2, 3, { x: 8, y: 9 }] }
}

我们经常会碰到一个场景，前端同学不太想定义(偷懒) data.obj 的所有的 key， 就想等着后端接口加载完，再统一赋值给 data.obj, 此时我需要接上例中的视图更新的 方式 1 或 2 直接赋值给 data.obj，这样在模板里做好判断，不会出问题，可以正常跑 但事先不定义好 data.obj 的所有 key, 代码维护起来很抓狂。

对此 vue 的文档上也讲的很明白，也可以参考下 深入响应式原理 https://v2.cn.vuejs.org/v2/guide/reactivity.html