Vue中组件的data是有很多坑的，先普及一下常识：

1.想使用data，必须先在data中创建。（如果不创建就会报错）示例：

<div class="">{{user.Age}}</div>

new Vue({
  el: '#app',
  data: {
	user:{Age:25}
  }
})

2.不能直接修改创建的对象的属性，例如想要给 user 添加一个 name 属性，值是 Jay 。

先来一个添加的错误示例（这是一个大坑，请注意），这样写页面不渲染，但是属性添加到了user对象，所以不会报错。

mounted() { this.user.name='Jay'; } //错误示例

再来几种正确有效的写法

解决方法一：强制刷新数据。 这里用了 $forceUpdate() ，它可以强制刷新数据。

mounted() { 
  this.user.name='Jay'; 
  this.$forceUpdate();
} //正确示例

解决方法二：重写整个对象。因为在 data 里面创建了 user 对象，可以直接修改它，缺点是得重写整个对象。

mounted() { 
  this.user={
	Age:25,
	name:'Jay'
  }
} //正确示例

解决方法三：重要知识点。Vue.set 方法。用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：

Vue.set( target, key, value )

参数说明：

• target: 可以是对象或数组
• key : 可以是字符串或数字
• value: 可以是任何类型

使用代码示例

new Vue({
	el: '#app',
		data:{
			a:{b:1}
		},
		mounted() {
			this.$set(this.a, 'bb', 121);
		}
})

 

到这里基本就算讲完，如果感觉已经理解，下面就可以不用看了，下面提供了几个帮助大家更好的理解的demo。

在Vue中，一般只有在data选项中声明的属性（或者是属性的属性）才是具有响应特性的。如果需要在data选项之外对已有属性添加（Vue 不允许动态添加根级响应式属性）具有响应特性的属性，需要用到Vue的set方法。

var vm = new Vue({
  data: {
    a: {              //a就是根级属性，不可动态添加
      b: 0          //b就是属性的属性，可以动态添加
    }
  }
})

何为响应特性？就是当我们更改data中的值的时候，HTML与之绑定的部分会随之更新的特性。

例1，Vue文档中的例子

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

例1中的a就是在data中声明的具有响应特性的属性，而b就不是。

例2，把上面的例子修改一下

var vm = new Vue({
  data: {
    a: {
      a1:''
    }
  },
  methods: {
    change: function () {
      this.a.a1 = "test"    //a1就是响应式的
      this.a.a2 = "testtest"    //a2就不是响应式的
    }
  }
})

在实际操作中，例2的a2虽然不是响应式的，但他却是可以在HTML部分被渲染更新出来。这里就是一个比较容易掉进去的坑了。由于Vue是异步执行DOM更新，虽然更新的动作是由this.a.a1 = "test"触发，可动作的完成是在this.a.a2 = "testtest"之后。

例3，一个更加完整的例子

var vm = new Vue({
  data: {
    a: {
      a1:''
    }
  },
  methods: {
    change: function () {
      this.a.a1 = "test"    //a1就是响应式的
      this.a.a2 = "testtest"    //a2就不是响应式的
      var that = this;
      setTimeout(function () {
        that.a.a3 = 'new text'; //这里与a2是相同的，却别在于这里的a3并不会被渲染到DOM中
        that.$set(that.a, 'a4', 'new text');    //这是正确的添加属性的方法
        that.a = {                              //这种写法与a2不同，a5可以被更新到DOM中
          a5: 'hahaha'
        }
      }, 1);
    }
  }
})