Vue监视数据的原理：
      1. vue会监视data中所有层次的数据。
      2. 如何监测对象中的数据？
              通过setter实现监视，且要在new Vue时就传入要监测的数据。
                (1).对象中后追加的属性，Vue默认不做响应式处理
                (2).如需给后添加的属性做响应式，请使用如下API：
                        Vue.set(target，propertyName/index，value) 或 
                        vm.$set(target，propertyName/index，value)
      3. 如何监测数组中的数据？
                通过包裹数组更新元素的方法实现，本质就是做了两件事：
                  (1).调用原生对应的方法对数组进行更新。
                  (2).重新解析模板，进而更新页面。
      4.在Vue修改数组中的某个元素一定要用如下方法：
            1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
            2.Vue.set() 或 vm.$set()
      特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

<div id="root">
      <h1>学生信息</h1>
      <button @click="student.age++">年龄+1岁</button> <br/>
      <button @click="addSex">添加性别属性，默认值：男</button> <br/>
      <button @click="student.sex = '未知' ">修改性别</button> <br/>
      <button @click="addFriend">在列表首位添加一个朋友</button> <br/>
      <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
      <button @click="addHobby">添加一个爱好</button> <br/>
      <button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
      <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
      <h3>姓名：{{student.name}}</h3>
      <h3>年龄：{{student.age}}</h3>
      <h3 v-if="student.sex">性别：{{student.sex}}</h3>
      <h3>爱好：</h3>
      <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
          {{h}}
        </li>
      </ul>
      <h3>朋友们：</h3>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}--{{f.age}}
        </li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
      el:'#root',
      data:{
        student:{
          name:'tom',
          age:18,
          hobby:['抽烟','喝酒','烫头'],
          friends:[
            {name:'jerry',age:35},
            {name:'tony',age:36}
          ]
        }
      },
      methods: {
        addSex(){
          // Vue.set(this.student,'sex','男')
          this.$set(this.student,'sex','男')
        },
        addFriend(){
          this.student.friends.unshift({name:'jack',age:70})
        },
        updateFirstFriendName(){
          this.student.friends[0].name = '张三'
        },
        addHobby(){
          this.student.hobby.push('学习')
        },
        updateHobby(){
          // this.student.hobby.splice(0,1,'开车')
          // Vue.set(this.student.hobby,0,'开车')
          this.$set(this.student.hobby,0,'开车')
        },
        removeSmoke(){
          this.student.hobby = this.student.hobby.filter((h)=>{
            return h !== '抽烟'
          })
        }
      }
    })

  <div id="root">
      <form @submit.prevent="demo">
        账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
        密码：<input type="password" v-model="userInfo.password"> <br/><br/>
        年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
        性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
        爱好：
        学习<input type="checkbox" v-model="userInfo.hobby" value="study">
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
        <br/><br/>
        所属校区
        <select v-model="userInfo.city">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
        </select>
        <br/><br/>
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el:'#root',
      data:{
        userInfo:{
          account:'',
          password:'',
          age:18,
          sex:'female',
          hobby:[],
          city:'beijing',
          other:'',
          agree:''
        }
      },
      methods: {
        demo(){
          console.log(JSON.stringify(this.userInfo))
        }
      }
    })