vue学习（20）vue.set方法

  <div id="root">
        <h2>姓名:{{name}}</h2>
        <h2>地址:{{address}}</h2>
        <hr>
        <button @click="addSex">添加一个性别</button>
        <h2>学生姓名:{{student.name}}</h2>
        <h2>学生年龄：{{student.age}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
    </div>
    <script type="text/javascript">
       const vm =new Vue({
            el:'#root',
            data:{
                name:'jerry',
                address:'杭州',
                student:{
                    age:18,
                    name:'tom'
                }，
            hobby:['学习','打怪兽']
            },
            methods: {
                addSex(){
                  //  Vue.set(this.student,'sex','男');
                  vm.$set(this.student,'sex','男');
                //此方法不生效
                  this.hobby[0]='打扫卫生';
                }
            },
        })
    </script>

知识点

1：使用set方法可以给对象追加属性。同时具有和data里面定义的其他属性一样，具有响应式。
2：有两种方法：Vue.set()或者vm.$set。
3：set不可以直接往data上加属性，也就是不可以直接往vm这个实例对象上追加属性。如上述例子，只能往student上面加属性。
4：使用set同样可以操作数组。直接修改替换数组中的某一项，并不会引起页面的更新，可以使用set。（并不常用）