Vue数据监视的原理

2022-07-17 16:37:03 阅读：170 来源： 互联网

        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根对象 添加属性！！

<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button><br>
        <button @click="addSex">添加性别属性，默认值为：男</button><br>
        <button @click.once="addFriend">在列表首位添加一个朋友</button><br>
        <button @click="updateFriend">修改第一个朋友的名字为：张三</button><br>
        <button @click.once="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>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                student:{
                    name:"林",
                    age:20,
                    hobby:["Vue","JAVA"],
                    friends:[
                        {
                            name:"彪",
                            age:20
                        },
                        {
                            name:"杰",
                            age:20
                        }
                    ]
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this.student,"sex","男");
                    this.$set(this.student,"sex","男");
                },
                addFriend(){
                    this.student.friends.unshift({name:"李氏",age:12})
                },
                updateFriend(){

                    // 通过数组中添加的对象，它其中的属性也是响应式的
                    //(有get name: ƒ reactiveGetter()
                    // set name: ƒ reactiveSetter(newVal))
                    this.student.friends[0].name="张三";
                },
                addHobby(){
                    this.student.hobby.unshift("听音乐");
                },
                updateHobby(){
                    this.student.hobby.splice(0,1,"开车");
                }

            },
        })
    </script>
</body>

标签：Vue,name,age,vm,set,student,监视,原理
来源： https://www.cnblogs.com/luoking/p/16487603.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue数据监视的原理