探讨Vue 数据监测原理-第五节-展开介绍 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. 案例
2. 需求1 页面上以数组形式添加学生爱好和对象形式添加爱好，比较两种方式的区别
   2.1. 页面公共部分
   2.2. js 部分 以数组形式添加爱好 和以对象形式添加爱好
   2.3. js 知识点
   2.4. vue 中的包裹
   2.5. 修改数组的另一种方法
3. 官网API

---

1. 案例

1.1. 页面案例

<div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <h2> 学校信息</h2>
        
        <button @click="addLeader"> 添加一个学校属性，默认张校长</button>
        <h2 v-if="school.schoolLeader"> 学校校长: {{school.schoolLeader}}</h2>
        <h2> 学校名称：{{school.schoolName}}</h2>
        <h2> 学校地址：{{school.schoolAddress}}</h2>
        </hr>
        <h2> 学生信息</h2>
        <button @click="addMan"> 添加一个性别属性，默认男</button>
        <h2>学生的姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">学生的性别：{{student.sex}}</h2>
        <h2>学生的年龄：真实：{{student.age.rAge}},对外：{{student.age.sAge}}</h2>
        <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: "安锐捷",
                school:{
                    schoolName: "天津安锐捷",
                 schoolAddress: "普天科技园",
                },
                student:{
                    name: 'tom',
                    age:{
                        rAge: 40,
                        sAge: 29
                    },
                    friends:[
                        {name: 'jerry',age: 35},
                        {name: 'tony',age: 36}
                    ]
                }
            },
            methods: {
                addMan(){
                    Vue.set(this.student,'sex','男')
                },
                addLeader(){
                    Vue.set(this.school,'schoolLeader','张校长')
                }
            },
        })
  </script>

2. 数组形式|对象形式爱好的区别

需求：在页面上以数组形式添加学生爱好和对象形式添加爱好，比较两种方式的区别

2.1. 页面公共部分

    <h2>爱好</h2>
    <ul>
        <li v-for="(item, index) in student.hobbys" :key="index">
            {{item}}
        </li>
    </ul>

2.2. js 部分 以数组形式添加爱好 和以对象形式添加爱好

	    data: {
	        student:{
	            //hobbys:['抽烟','喝酒','汤头'],
	            hobbys:{
	                h1:'抽烟',
	                h2:'喝酒',
	                h3:'汤头'
	            }
	        }
	    },

• 页面效果展示如下图例
  • 从上图可以看出，

    • 1)、数组形式添加的不是响应式的，对象添加的是响应式的

    • 2)、数组形式添加的爱好不是响应式的，所以根据数据索引去修改值的时候不会影响页面渲染

      尝试通过索引修改学生爱好如下：

  • 根据上图我们发现了，在Vue 中不能根据索引值 去修改数组中的数据，
  • Vue 中数组的变化其实不是通过 **getter setter **去监视的
  • 那他是怎么实现的呢**？？？**
  • ？？
    

2.3. js 知识点

• 我们先来看一下数组中的几个方法如下：
  • let arr = [1,3,5,7,9]
  1. 如果想给数组末尾添加一个元素， 可以通过 push
  2. 如果想删除数组末尾的元素，可以通过 pop
  3. 如果想删除数组开头的元素，可以通过 shit
  4. 如果想给数组开头添加一个元素，可以通过 unshit
  5. 如果想在数组的指定位置插入/删除/替换掉一个元素，可以通过splice
  6. 如果想对数组进行排序，可以通过sort
  7. 如果想把数组反转，可以通过reverse

  • 以上出来的这些方法，都是可以修改数组的

  • 其实在Vue 中也是这样的，只要调用了数组中的这些相应方法，就可以修改Vue中数组对应的值

  • 在Vue 中，使用函数修改数组，测试图例如下
    
    
    
    通过了一系列的测试，发现Vue 中通过函数可以修改属性后，可以渲染页面；

• 此时此刻 我突然想到了在 第二节里面最后遗留的问题，“整体更新为马老师时，更新不奏效”，那 么在这 里也就可以愉快的解决了, 修改马老师的代码应该修改为
• this.persons.splice(0,1,{id:“001”,name:“马老师”,age:“50”,sex:‘男’})

2.4. Vue 中的包裹

• Vue 中是如何监测的调用的 数组的这几个方法的呢？
• Vue 中用了一个技术 包裹
• 如下图示例 拿push举例
• 总结下来就是
  • Vue 中自己写了一个push,他做了两件事
    1. 首先调用了原型对象上的push ** Array.prototype.push** 进行正常的push 操作
    2. 重新解析模板，生成虚拟DOM 新旧虚拟DOM比对,然后更新页面 走那一套对象监视的流程

2.5. 修改数组的另一种方法

• Vue.set(vm.student.hobbys,1,'打台球')
• Vue.set(vm.student.friends,1,{name: 'maoxb',age: 36})

3. 官网API

• 唐 - 李白 《南陵别儿童入京》
• 白酒新熟山中归，黄鸡啄黍秋正肥。
• 呼童烹鸡酌白酒，儿女嬉笑牵人衣。
• 高歌取醉欲自慰，起舞落日争光辉。
• 游说万乘苦不早，著鞭跨马涉远道。
• 会稽愚妇轻买臣，余亦辞家西入秦。
• 仰天大笑出门去，我辈岂是蓬蒿人。

---

白酒刚刚酿熟时我从山中归来，黄鸡在啄着谷粒秋天长得正肥。
喊着童仆给我炖黄鸡斟上白酒，孩子们嬉笑吵闹牵扯我的布衣。
放晴高歌求醉想以此自我安慰，醉而起舞与秋日夕阳争夺光辉。
游说万乘之君已苦于时间不早，快马加鞭奋起直追开始奔远道。
会稽愚妇看不起贫穷的朱买臣，如今我也辞家去长安而西入秦。
仰面朝天纵声大笑着走出门去，我怎么会是长期身处草野之人？

创作不易，欢迎 多多点赞，收藏 有不到位的欢迎指证
邮箱：pymxb1991@163.com
微信：py_mxb