Vue监视数据

Vue监视数据

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="app">
    <h2>学校信息</h2>
    <ul>
        <li>名称：{{schoolName}}</li>
        <li>地址：{{schoolAddress}}</li>
    </ul>
    <h2>学生信息</h2>
    <button @click="addSex">添加性别属性男</button>
    <ul>
        <li>姓名：{{student.name}}</li>
        <!--学生对象没有性别属性，所以student.sex为undefined，vue中显示为空-->
        <li v-if="student.sex">性别：{{student.sex}}</li>
        <li>年龄：{{student.age}}</li>
        <button @click="modifyHobbies1">修改第一个爱好（不奏效）</button>
        <button @click="modifyHobbies2">修改第一个爱好（奏效）</button>
        <li>爱好：
            <ul>
                <li v-for="(h,index) in student.hobby">{{h}}</li>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;   //阻止vue在启动时生成生产提示

    const vm = new Vue({
    el: '#app',
    data: {
        schoolName: '辰光中学',
        schoolAddress: '山西',
        student:{
            id:'01',
            name:'张三',
            age:16,
            hobby:['读书','写字','唱歌']
        }
    },
    methods:{
        //为student对象添加性别属性
        addSex(){
            /*
            * Vue.set(target,propertyName/index,value)
            * target不能是Vue实例或者Vue实例的跟数据对象
            */
            // Vue.set(this.student,'sex','男')
            this.$set(this.student,'sex','男')
        },
        /*
        * 根据modifyHobbies1和modifyHobbies2知道：
        * 数组直接用等号替换vue不会认，要用数组的 'push,pop,shift,unshift,splice,sort,reverse' 这些方法去操作，
        * 但这些方法不是用的Array的，而是vue的，Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。
        */
        modifyHobbies1(){
            this.student.hobby[0] = '跳舞'
            alert('vm._data.student.hobby[0] = ' + this.student.hobby[0]
            + '\n但页面不会改变')
        },
        modifyHobbies2(){
            this.student.hobby.splice(0,1,'跳舞')
            // Vue.set(this.student.hobby,0,'跳舞')  //这个也可以
            alert('vm._data.student.hobby[0] = ' + this.student.hobby[0]
                + '\n页面会改变,这里的splice是vue的'
                +'\nvm._data.student.hobby.splice === Array.prototype.splice结果为'
                + (vm._data.student.hobby.splice === Array.prototype.splice))
        }
    }
    })
</script>