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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
hdu4407(容斥原理)

hdu4407(容斥原理)

题意：给一串数字1,2，......n，两个操作:1、修改第k个数字，2、查询区间[l,r]中与n互质的数之和。 解题思路：咱一看，像线段树，但是如果用线段树做，那么每个区间一定要记录所有的素因子，这样会超内存。然后我就做不来了。后来看了题解，原来是用容斥原理来做的。还记得这道题目吗？求区间[1,r]中与p互质的数的个数，如果不会的话就先去做那题吧。现在这题是求区间[l,r]中与n互质的数的和
阅读更多...
poj 3050 dfs + set的妙用

poj 3050 dfs + set的妙用

题意: 给一个5x5的矩阵，求由多少个由连续6个元素组成的不一样的字符的个数。 解析： dfs + set去重搞定。 代码： #include <iostream>#include <cstdio>#include <set>#include <cstdlib>#include <algorithm>#include <cstring>#include <cm
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
hdu4407容斥原理

hdu4407容斥原理

题意： 有一个元素为 1~n 的数列{An}，有2种操作（1000次）： 1、求某段区间 [a,b] 中与 p 互质的数的和。 2、将数列中某个位置元素的值改变。 import java.io.BufferedInputStream;import java.io.BufferedReader;import java.io.IOException;import java.io.Inpu
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2