7.Vue - 监测数据的原理、Vue.set、vm.$set

2023-12-26 03:30
文章标签 javascript vue 原理 set vm frontend 监测数据

本文主要是介绍7.Vue - 监测数据的原理、Vue.set、vm.$set，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

监测数据的原理

目录

监测数据的原理

一、更新时的问题

二、Vue检测对象

三、Vue检测数组

3.1 push 添加

3.2 shift 删除

3.3 splice 替换

3.4 原理

四、Vue.set

4.1 追加属性

4.2 案例

五、总结

5.1 代码练习

5.2 总结

一、更新时的问题

为什么我们要研究一下Vue监测数据的原理？

以防我们后续在给data赋值或者修改data中数据时导致修改不成功

比如下面这个例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue    引入之后，全局就多了一个vue这个构造函数--><script type="text/javascript" src="../js/vue.js"></script> </head><body><div id="root"><h2>人员列表</h2><button @click="updateMei">更改马冬梅信息</button><ul><li v-for="(p,index) in  persons" :key="p.id" >{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falseconst vm=  new Vue({el:'#root',data:{persons:[{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}],},methods: {updateMei(){this.persons[0].name = '马老师'this.persons[0].age = 50,this.persons[0].sex = '男'}},})</script>   </body>
</html>

当我们点击按钮之后，马冬梅的信息会随之改变

img

我们不难发现：页面中的内容修改了，Vue中的数据也修改了

              
  methods: {updateMei(){//this.persons[0].name = '马老师'//this.persons[0].age = 50,//this.persons[0].sex = '男'this.persons[0] ={id:'001',name:'马老师',age:50,sex:'男'}}},

初始界面和上面还是相同的，但是我们点击按钮之后，页面和Vue并没有反应

img

原因：从代码的层面来说，我们真的把数组中的某个元素修改了，但是Vue并没有检测到

下面的这样图就是很好的证明

image-20231109174153601

我们直接操作的数组的索引值，用赋值的方式去改（具体参照Vue监测数组数据的原理）

数组中 persons[0] persons[1] persons[2].....这种没有getter和setter，但是persons[0] persons[1]里面的属性有getter和setter，比如name、age、sex都会有getter和setter

二、Vue检测对象

可以先复习一下这篇文章的数据代理

2.Vue — 模板语法、数据绑定、el与data的写法、数据代理-CSDN博客

image-20231110085651634

vm实例的name和address其实都来自_data，_data中的数据来自于我们所传入的配置项data，也就是vm._data=data

  1. 加工我们传入的data数据（黄色框）

    将我们data中的每一组key-value形成getter和setter

  2. vm._data=data

    流程图

    img

这个地方为什么要加工一下？

第一步加工data数据后就可以做响应式了。

响应式：数据变了，页面也跟着变就是响应式

当我们修改了_data.name的时候，就会引起name的setter调用，setter里面有一个调用可以重新解析模板，生成新旧DOM，新旧DOM对比生成新的页面

三、Vue检测数组

img

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue    引入之后，全局就多了一个vue这个构造函数--><script type="text/javascript" src="../js/vue.js"></script> </head><body><div id="root">、<h1>学校信息</h1><h2>学校名称：{{school.name}}</h2><h2>学校地址：{{school.address}}</h2><h2>校长是:{{school.leader}}<hr/><h1>学生信息</h1><button @click="addSex" >添加一个学校信息，默认值是男</button><h2>学生姓名：{{student.name}}</h2><h2>学生性别：{{student.sex}}</h2><h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2><hr/><h1>爱好</h1><ul><li v-for="(h,index) in student.hobby">{{h}}</li></ul><h1>朋友们</h1><ul><li v-for="(f,index) in student.friends">{{f.name}}---{{f.age}}</li></ul></div></body><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falseconst vm=  new Vue({el:'#root',data:{school:{name:'尚硅谷',address:'北京'},student:{name:'tom',// sex:'男',age:{// 真实年龄rAge:40,sAge:29},hobby:['抽烟','喝酒','烫头'],friends:[{name:'jerry',age:35},{name:'tony',age:36}]},},methods: {addSex(){Vue.set(this.student,'sex','男')}},})</script>   
</html>

img

注意看，我们的爱好写成的是一个数组的形式，我们在下面观察，我们并没有发现爱好的getter和setter（如果把爱好的属性写成对象的模式，会有getter和setter），那说明我们直接修改数组的话，页面的内容可能不会改变

img

如下所示，也确实没有改变

image-20231110161221768

修改数组的值可以参考3.1、3.2、3.3

3.1 push 添加

向数据中添加一个数据，就是push

Vue发现我们把数组内容改变了，重新解析模板了，页面就有了一个新的展示

image-20231110161722635

3.2 shift 删除

删除数组中的第一个元素

img

3.3 splice 替换

参数0 代表数组的下标 ，参数1 代表干掉， 参数‘打台球’代表替换成打台球

img

3.4 原理

Vue是怎么监视到我们调用push方法的呢？

Vue使用了一个叫包装的方法，我们调用的push已经不是数组中原汁原味的push了

Vue中的push做了两件事

  1. 调用原汁原味的push

  2. 重新解析模板生成虚拟DOM，渲染界面

左侧是Vue监视的数组的push，右侧是原汁原味中数组的push

image-20231110162543509

Vue对数组的监视是靠包装数组身上常用的操作数据的API实现的

四、Vue.set

4.1 追加属性

我们在代码中没有写某个对象，但是在后期我们想添加上

<!DOCTYPE html>
​
<html>
​
<head><meta charset="UTF8" /><title>初始vue</title>
​<!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
​
</head>
<body><!--准备好一个容器--><div id="root"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><hr /><h2>学生姓名：{{student.name}}</h2><h2>学生年龄：真实{{student.age.rAge}}</h2><h2>学生年龄：对外{{student.age.sAge}}</h2>
​<ul><li v-for=" (f,index) in student.friends" ::key="index">{{f.name}} ---{{f.age}}</li></ul></div>
​<script type="text/javascript">//关闭开发环境时的生产提示Vue.config.productionTip = false
​new Vue({el: "#root",data: {name: "尚硅谷",address: "北京",student: {name: 'tom',age: {rAge: 40,sAge: 29},friends: [{ name: 'jerry', age: 35 },{ name: 'Tony', age: 36 }]}}})</script>
</body>
</html>

image-20231110100103183

比如下面这种情形

我们在Vue中给学生添加一个性别，我们不难发现我们新添加的这个性别没有getter和setter

img

img

那如果我们前期没添加，但是后期又想添加怎么办？

API给我提供了一个Vue.set（target,key,val）方法

target:我们要往谁的身上追加一个属性

key：往target身上加一个什么属性

val:值

或者可以使用vm实例对象的API

vm.$set(target,key,val)

完成的事情和Vue.set（target,key,val）方法一模一样

当执行Vue.set(vm._data.student,'sex','男')后，页面发生了变化

或者使用

Vue.set(vm.student,'sex','男')后，页面发生了变化

虽然是后天添加，但是我们依然享有getter和setter

img

img

4.2 案例

案例：我们要点击一个按钮，给学生追加性别

img

点击之后 如下所示

img

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue    引入之后，全局就多了一个vue这个构造函数--><script type="text/javascript" src="../js/vue.js"></script> </head><body><div id="root">、<h1>学校信息</h1><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><hr/><h1>学生信息</h1><button @click="addSex" >添加一个学校信息，默认值是男</button><h2>学生姓名：{{student.name}}</h2><h2>学生性别：{{student.sex}}</h2><h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2><hr/><ul><li v-for="(f,index) in student.friends">{{f.name}}---{{f.age}}</li></ul></div></body><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falseconst vm=  new Vue({el:'#root',data:{name:'尚硅谷',address:'北京',student:{name:'tom',// sex:'男',age:{// 真实年龄rAge:40,sAge:29},friends:[{name:'jerry',age:35},{name:'tony',age:36}]},},methods: {addSex(){Vue.set(this.student,'sex','男')}},})</script>   
</html>

不难发现，我们上面那个案例成功了

但是！！！！！我们现在要变一下，我们不给data里面的对象追加属性了，我们给data追加！

img

结论：Vue.set不能给data追加属性（也不能给vm 追加），但是可以给data里面的对象追加属性

img

五、总结

5.1 代码练习

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue    引入之后，全局就多了一个vue这个构造函数--><script type="text/javascript" src="../js/vue.js"></script> </head><body><div id="root"><button @click="student.age++">年龄+1岁</button><br/><button @click="addSex">添加性别属性，默认值：男</button><br/><button @click="addFriend">在列表首位添加一个朋友</button><br/><button @click="updateFirstFriendName">修改第一个好友的名字</button><br/><button @click="addHobby">添加一个爱好</button><br/><button @click="updateHobby">修改第一个爱好为：开车</button><br/><h1>学生信息</h1><h2>学生姓名：{{student.name}}</h2><h2>学生年龄：{{student.age}}</h2><!-- student.sex 如果没有的话，下面这个字段就不要出现 --><h2 v-if="student.sex">学生性别：{{student.sex}}</h2><hr/><h1>爱好</h1><ul><li v-for="(h,index) in student.hobby">{{h}}</li></ul><h1>朋友们</h1><ul><li v-for="(f,index) in student.friends">{{f.name}}---{{f.age}}</li></ul></div></body><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falseconst vm=  new Vue({el:'#root',data:{student:{name:'tom',// sex:'男',age:18,hobby:['抽烟','喝酒','烫头'],friends:[{name:'jerry',age:35},{name:'tony',age:36}]},},methods: {addSex(){Vue.set(this.student,"sex",'男')},addFriend(){// 往前面加一个this.student.friends.unshift({name:'jack',age:70})},updateFirstFriendName(){// 下面注释这么写就费了// this.student.friends[0] ='123'this.student.friends[0].name ='张三'},addHobby(){this.student.hobby.push('学习')},updateHobby(){// 从第0个开始，删除一个，并再加入一个开车// this.student.hobby.splice(0,1,'开车')// 将数组中的下标为0的修改为开车Vue.set(this.student.hobby,0,'开车')}},})</script>   
</html>

img

5.2 总结

  • vue会监视data中所有层次的数据

    只要是data中定义的都可以监视到，不管里面有多少层

  • 如何检测对象中的数据？

    通过setter实现监视，且要在new Vue时就传入要监测的数据

    • 对象中后追加的属性，Vue默认不做响应式处理

    • 如需给后添加的属性做响应式处理，需要下面的API

      img

  • 如何监测数组中的数据

    通过包裹数组更新元素的方法实现，本质就是做了两件事

    • 调用原生对应的方法对数组进行更新

    • 重新解析模板，进而更新页面

  • 在Vue修改数组中的某个元素一定要用如下方法

img

什么是数据劫持？

比如我们在代码中是这么写的

image-20231110164806201

但是在控制台输出时变成了下面这个样子，这就是数据劫持

变成了getter和setter的样子，这种行为就叫做数据劫持

如果我们修改了student，就马上被set_student劫持到了，劫持到了后第一件事正常修改数据，第二件事会重新解析模板

这篇关于7.Vue - 监测数据的原理、Vue.set、vm.$set的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/537941。

相关文章

JAVA封装多线程实现的方式及原理

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》：本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中，封装多线程的原理主要围绕着将多线程相关的操
阅读更多...
kotlin中的模块化结构组件及工作原理

kotlin中的模块化结构组件及工作原理

《kotlin中的模块化结构组件及工作原理》本文介绍了Kotlin中模块化结构组件,包括ViewModel、LiveData、Room和Navigation的工作原理和基础使用,本文通过实例代码给大家... 目录ViewModel 工作原理LiveData 工作原理Room 工作原理Navigation 工
阅读更多...
Java的volatile和sychronized底层实现原理解析

Java的volatile和sychronized底层实现原理解析

《Java的volatile和sychronized底层实现原理解析》文章详细介绍了Java中的synchronized和volatile关键字的底层实现原理,包括字节码层面、JVM层面的实现细节,以... 目录1. 概览2. Synchronized2.1 字节码层面2.2 JVM层面2.2.1 ente
阅读更多...
Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...
MySQL的隐式锁(Implicit Lock)原理实现

MySQL的隐式锁(Implicit Lock)原理实现

《MySQL的隐式锁(ImplicitLock)原理实现》MySQL的InnoDB存储引擎中隐式锁是一种自动管理的锁,用于保证事务在行级别操作时的数据一致性和安全性,本文主要介绍了MySQL的隐式锁... 目录1. 背景：什么是隐式锁？2. 隐式锁的工作原理3. 隐式锁的类型4. 隐式锁的实现与源代码分析4
阅读更多...
MySQL中Next-Key Lock底层原理实现

MySQL中Next-Key Lock底层原理实现

《MySQL中Next-KeyLock底层原理实现》Next-KeyLock是MySQLInnoDB存储引擎中的一种锁机制,结合记录锁和间隙锁,用于高效并发控制并避免幻读,本文主要介绍了MySQL中... 目录一、Next-Key Lock 的定义与作用二、底层原理三、源代码解析四、总结Next-Key L
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
HTML5 data-*自定义数据属性的示例代码

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.
阅读更多...
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》：本文主要介绍了如何使用CSS模拟HTML的title属性，通过鼠标悬浮显示提示文字效果，通过设置`.tipBox`和`.tipBox.tipContent`的样式，实现了提示内容的隐藏和显示，详细内容请阅读本文，希望能对你有所帮助... 效
阅读更多...
前端bug调试的方法技巧及常见错误

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》：本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2