Vue 对象中 动态添加的属性，不具备响应能力问题

做项目遇到Vue的“坑”。

实例：

HTML

  

    

      
姓名：{{info.uname}}
      
年龄{{info.age}}
      
自定义：{{info.abc}}
    
    

      点击
    
  

js

    var vm = new Vue({
      el: '#app',
      data: {
        info: {
          uname: 'lisi',
          age: 12
        }
      },
      methods: {
        handle () {
          this.info.age = 13;
          // 动态的添加了一个属性
          this.info.abc = 'haha'
        }
      }
    });

记得：引入 vue.js文件
这是第一次执行的结果：第一次具备响应能力。

第二次 我在控制台修改 数据

第三次： 再次修改数据

总结：

  vue中data中的数据必须提前定义好。
  如果没有在data提前定义的数据，而是后来动态添加的，那么该数据没有响应式的能力
  解决方法、提前定义好数据。
  但是，如果确实需要动态添加数据，并且具备响应式能力
  可以使用 this.$set方法添加数据
   // Vue.set(this.info, 'abc', 'hi');

运用：

      methods: {
        handle () {
          this.info.age = 13;
          // 动态的添加了一个属性
          首先你能确定是否能找到Vue实例：
          Vue.set(this.info, 'abc', 'hi');
          找不到？？ 用这个-----》
          this.$set(this.info, 'abc', 'hi');
        }
      }