探讨Vue 数据监测原理-第六节- Vue监测数据-做小案例进行回顾-CSDN博客

本文链接：https://blog.csdn.net/pymxb1991/article/details/125710325

文章目录

探讨一下Vue 数据监测的原理

探讨一下Vue 数据监测的原理

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
Vue 教程 https://cn.vuejs.org/v2/guide/
MDN Web Docs 社区 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

本次探讨共的第六章节

第六节- Vue监测数据-做小案例进行回顾

这一节主要侧重于回顾，总结

1. 案例

    <div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <h2> 学生信息</h2>
        <span>需求1. 给学生的年龄加1岁 </span>
        <button @click="addAge">年龄加1</button>
        </br>
        <span>需求2. 给学生的性别属性，默认值为 男 </span>
        <button @click="addSex">添加性别</button>
        <button @click="updateSex">修改性别</button>
        </br>
        <span>需求3. 给学生朋友的首位添加一个朋友 </span>
        <button @click="addFriend">首位添加朋友</button>
        </br>
        <span>需求4. 修改第一个朋友的名子为：“张三” </span>
        <button @click="updateFriend">修改第一个朋友名子为张三</button>
        </br>
        <span>需求5. 添加一个爱好：学习 </span>
        <button @click="addHobby">添加一个爱好</button>
        </br>
        <span>需求6. 修改第一个爱好：开车 </span>
        <button @click="updateHobby">修改爱好</button>
        </br>
        <span>需求7. 过滤掉爱好中的抽烟 </span>
        <button @click="filterHobby">过滤抽烟</button>

        <h2>学生的姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">学生的性别：{{student.sex}}</h2>
        <h2>学生的年龄：{{student.age}}</h2>
        <h2>爱好</h2>
        <ul>
            <li v-for="(item, index) in student.hobbys" :key="index">
                {{item}}
            </li>
        </ul>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(friend, index) in student.friends" :key="index">
                {{friend.name}} - {{friend.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: "#root",
            data: {
                name: "安锐捷",
                student:{
                    name: 'tom',
                    age: 18,
                    hobbys:['抽烟','喝酒','汤头'],
                    friends:[
                        {name: 'jerry',age: 35},
                        {name: 'tony',age: 36}
                    ]
                }
            },
            methods: {
                addAge (){
                    this.student.age++;
                },
                addSex(){
                    //this.student.sex = '男'; //无效的写法
                    Vue.set(vm.student,'sex','男');
                    //vm.$set(vm.student,'sex','男')

                },
                updateSex(){
                    this.student.sex = '女';
                },
                addFriend(){
                    this.student.friends.unshift({name:'jack',age:18})
                },
                updateFriend(){
                    this.student.friends.splice(0,1,{name:'张三',age:18});
                },
                addHobby(){
                    this.student.hobbys.push('学习')
                },
                updateHobby(){
                    this.student.hobbys.splice(0,1,'开车');
                },
                filterHobby(){
                   this.student.hobbys =  this.student.hobbys.filter(function (item) {
                    return item !== '抽烟' })
                }
            },
        })

2. 总结

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