vue中为对象添加值的问题

demo：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <div id="app">
    <p>{{obj.name}}----{{obj.age}}--{{obj.height}}</p>
    <input type="text" v-model="obj.name">
    <input type="text" v-model="obj.age">
    <input type="text" v-model="obj.height">
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
         obj:{name: '123'}
      },      
　　　　created(){

　　　　　 this.obj.name = 'lisi';
         this.obj['age']= '12';
         this.obj['height']= '170';

　　　　//在创建的时候添加属性 age 和 height
　　　　//然而 你就发现，当你在输入框输入值的时候，只有name是响应更新的，新增加的属性是没有动态更新的
　　　　//详见  https://cn.vuejs.org/v2/guide/reactivity.html

　　　　// 如此，便这么写 ①  var temp = {name:'lisi',age: 12,'height':'12'}; 
　　　　// 　　　　　　　　   this.obj = Object.assign({},this.obj,temp)

　　　　// 　或者这样　　 ②  var temp = {name:'lisi',age: 12,'height':'12'}; 
　　　　// 　　　　　　　　   this.obj = temp;

　　　　// 　　　　　　　 ③　var temp = {name:'lisi',age: 12,'height':'12'}; 
　　　　//          　　　  for(var key in temp){
　　　　//　　　　　　　　　　　　 Vue.set(this.obj,key,temp[key]);
　　　　//　　　　　　　　　  }
　　　　// 以上三种方法就可以使属性实时更新了

      }

    })
  </script>
</body>
</html>

数组中也会有类似的问题详见https://cn.vuejs.org/v2/guide/list.html#对象更改检测注意事项