【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的根数据对象添加属性

        <button @click="student.age++">年龄+1</button><br>
        <button @click="addSex">添加性别属性，默认值：男</button><br>
        <button @click="addFirstFriend">在列表首位添加一个朋友</button><br>
        <button @click="updataFriend">修改第一个朋友的名字为：煎蛋</button><br>
        <button @click="addHobby">添加一个爱好</button><br>
        <button @click="updateHobby">修改第一个爱好为:开车</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>

        <script>
            const vm = new Vue({
                el: "#root",
                data() {
                    return {
                        student: {
                            name: 'tom',
                            age: 18,
                            hobby: ['抽烟', '喝酒', '烫头'],
                            friends: [
                                { name: 'ali', age: 35 },
                                { name: 'tony', age: 36 }
                            ]
                        }
                    }
                },
                methods: {
                    addSex() {
                        Vue.set(this.student, 'sex', "男")
                    },
                    addFirstFriend() {
                        this.student.friends.unshift({ name: 'jiandan', age: 18 });
                    },
                    updataFriend() {
                        this.student.friends[0].name = "煎蛋"
                    },
                    addHobby() {
                        this.student.hobby.push("开车")
                    },
                    updateHobby() {
                        this.student.hobby.splice(0, 1, "study")
                    }

                },

            })
        </script>