Vue中添加新属性并更新视图[ Vue.set() ]

背景

再项目开发过程中经常遇到给data里面声明的变量，动态的赋值时，值发生了变化，但是视图并没有更新；
以下是官方文档中的叙述：

当一个 Vue 实例被创建时，它将 data 对象中的 所有的属性 加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性 才是响应式的。也就是说如果你添加一个新的属性，比如：vm.b = 'hi'，那么对 b 的改动将不会触发任何视图的更新；

问题简述

1、如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值，这样后续赋值的时候即可跟踪到；例如：

data：{
   id: '',
 name: '',
  age: ''
}

2、不知道自己需要什么属性，所有的值都是动态赋予的（后面的解决方案，主要针对此问题）；

解决思路

查看vue的官方文档，我们发现它提供了Vue.set( target, propertyName/index, value )方法
(网址：https://cn.vuejs.org/v2/api/#Vue-set)

用法：

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性，例如：this.obj.s = 'hello'，这种是不会触发视图更新的
此时使用：
this.$set(目标变量，属性，属性值);

举例：

data: {
  obj: {}
}

methods: {
  init () {
    // 给obj添加了一个name的属性，它的值是'zhangsan'
    this.$set(this.obj, 'name', 'zhangsan')
}
}

综述

1、已知属性时，设置默认值保证视图更新；
2、属性未知时，使用Vue.set()，进行动态赋值，更新视图