Vue2(四):Vue监测数据的原理

一、先来看一个问题

添加一个按钮点击更新马冬梅的信息:

<button @click="gengxin">点击更新马冬梅的信息</button>
methods:{gengxin(){this.person[1].name='马老师',this.person[1].age=50,this.person[1].sex='男'}}

下面这种方式就不能奏效,但是在控制台查看person[1]姓名年龄啥的都是更改之后的。如果先点击按钮在点击vue后台可以看到信息更改页面却不更改,先点击vue后台就vue也没改页面也没改,这是为啥呢?

 this.person[1]={id:'002',name:'马老师',age:'50',sex:'男'}

二、Vue监视对象改变的原理

我们写的data是要传入的数据,传入到vm._data,这两个其实不是一摸一样的,打开控制台可以看到vm._data里面还有一堆东西,就是因为data在传入给vm._data之前,还要进行一些处理。

加工一下就能做响应式了(数据变了页面也跟着变),vm._data里面还有name.get/address.get和name.set等等函数

我们用原生js写也可以大概模拟一下name和address的getter和setter但是vue做的事情要更多,比如直接输入vue.name就可以查看,js还要vue._data.name

而且如果data里面数据套娃的话vue是自动递归嵌套有getter和setter的,js就没有了,vue连嵌套的数组也能给你挖出来配套getter和setter。

三、Vue监测对象中的数据

1.Vue.set()

实现后添加的数据也能有响应式的功能调用Vue给的API:

Vue.set(vm.student,'sex','男');

vm.$set(vm.student,'sex','男');

实现点击按钮添加性别

<div id="root"><h2>学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2><hr/><button @click="addSex">点我添加性别</button><h2>学生姓名:{{student.name}}</h2><h2 v-if="student.sex">学生性别:{{student.sex}}</h2><!-- 判断一下有没有性别,有就展示没有就隐藏 --><h2>学生真实年龄:{{student.age.rAge}},对外年龄:{{student.age.lAge}}</h2><h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></h2></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{name:'尚硅谷',address:'北京',student:{name:'tom',age:{rAge:40,lAge:18},friends:[{name:'jerry',age:35}]}},methods: {addSex(){Vue.set(this.student,'sex','男')}},})

set的局限性:最开始我们在student里面没有加sex但是盒子上面引用了没有报错,是因为a.b,只要data里有a就不会报错,如果我们再想添加一个校长是不可以给data里面追加属性的,第一个参数不可以是data或者vm。

四、Vue监测数组中的数据

数组中的数据不能靠setter和getter取得和改变数据,在Vue修改数组中的某个元素实现响应式的方法:

1.使用这些API:

push:在最后一个位置添加元素

pop:删除最后一个元素

shift:删除第一个

unshift:往前边加一个

splice:在指定位置插入一个元素

sort:分类

reverse:反转这个数组

filter不算,因为它都不能改变原数组,可以筛选完之后再赋值到之前的数组

所以我们就知道一当中的问题是为什么了,我们对数组的索引值直接去赋值肯定不行

vue当中的数组调用push方法和原始的数组调用push不一样,它是先像原始数组那样调,然后去重新解析模版,生成虚拟dom等等

2.Vue.set() 或 vm.$set()

Vue.set(vm.student.hobby,1,'跳舞')

五、综合大练习

 <div id="root"><hr/><h1>学生信息</h1><button @click="student.age++">年龄+1</button><button @click="addSex">添加性别属性,默认值为男</button><button @click="addFriend">在列表首页添加一个朋友</button><button @click="xiugai">修改第一个朋友的名字为张三</button><button @click="addHobby">添加一个爱好</button><button @click="xiugaiaihao">修改第一个爱好为开车</button><h2>学生姓名:{{student.name}}</h2><h2 v-if="student.sex">学生性别:{{student.sex}}</h2><h2>学生真实年龄:{{student.age}}</h2><h2><ul>朋友<li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul><ul>爱好<li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul></h2></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{student:{name:'tom',age:18,hobby:['抽烟','喝酒','打麻将'],friends:[{name:'jerry',age:35},{name:'tony',age:40}]}},methods: {addSex(){Vue.set(this.student,'sex','男')},addFriend(){this.student.friends.unshift({name:'tt',age:18})},xiugai(){//this.student.friends[0].name.splice(0,1,'张三')this.student.friends[0].name='张三'},addHobby(){this.student.hobby.unshift('唱歌')},xiugaiaihao(){this.student.hobby.splice(0,1,'开车')}},})</script>

我做的时候修改第一个朋友的名字为张三的出了点问题,我光记着不能直接赋值了,但是像这种给数组下的某一个去赋值是可以的,不可以的是不能数组那一条直接赋值frined[0]={,,}这种

说的是0这一项的setter 和getter没有,0本身是对象,下面的name是一个属性,有属性就有setter 和getter。

不能通过数组的索引值直接赋值!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/751256.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前端】-css的详解

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

信号(Linux)

信号 前言1. 引入2. 概念3. 初步认识ctrlc信号4. 硬件中断 一、信号的产生1. 键盘组合键2. kill命令3. 系统调用①kill②raise③ abort 4. 异常①异常产生信号②原理 5. 软件条件6. 小结 二、信号的保存1. 引入2. 原理3. 接口①信号集——sigset_t②sigprocmask③sigpending④使…

spring注解驱动系列--AOP探究一

一、AOP--动态代理 指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式 二、使用栗子 一、导入aop模块 <dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>4…

虚拟机开机字体变大,进入系统后字体模糊

问题 虚拟机开机字体变大&#xff0c;进入系统后字体模糊。 原因 虚拟机配置问题。 解决办法 修改配置为如下:

资深老鸟经验,性能测试-性能指标分析总结,一篇策底概全...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 性能测试指标 1、…

leetcode代码记录(不同路径

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在…

Python实现24点游戏

24点游戏是一种数学益智游戏&#xff0c;它的目标是通过使用加法、减法、乘法和除法这四种基本算术运算&#xff0c;使得四个数字的结果等于24。这个游戏不仅能锻炼玩家的数学计算能力&#xff0c;还能提高逻辑思维和快速反应能力。 游戏规则非常简单&#xff1a; 游戏通常使…

如何使用ArcGIS Pro生成带计曲线等高线

等高线作为常见的地图要素经常会被使用到&#xff0c;一般情况下生成的等高线是不带计曲线的&#xff0c;在某些情况下我们需要带计曲线的等高线&#xff0c;这里为大家介绍一下ArcGIS Pro生成带计曲线等高线的方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数…

Node.js 文件夹遍历技巧:实现高效的文件管理

在 Node.js 开发中&#xff0c;经常需要对文件系统进行操作&#xff0c;包括遍历文件夹以获取文件列表。本文将讨论使用 Node.js 遍历文件夹的几种常用方法&#xff0c;并通过一个实际案例来演示如何实现。 基本概念 在开始之前&#xff0c;让我们了解一些基本的概念&#xff…

关 于 重 燃 学 习 的 热 情

3月1日是我回学校的第一天。经历了长达8个月在家的昏暗时刻&#xff0c;我这10天的感觉和在家的感觉发生了翻天覆地的变化&#xff0c;最明显的莫过于学习状态的改变。 倒不是说在家学的不好&#xff0c;而是说在学校&#xff0c;我对学习的整体感觉&#xff0c;以及专注程度&…

微信小程序Skyline模式自定义tab组件胶囊与原生胶囊平齐,安卓和ios均自适应

进入下面小程序可以体验效果&#xff1a; 至于原理的话&#xff0c;解释起来毕竟麻烦&#xff0c;各位可以看源码自己分析。其实很简单&#xff0c;就算计算布局。很多网上公布的布局&#xff0c;都不能正常自适应。在下这个是完美可以的 1、WXML <view class"weui…

Kubernetes operator系列:kubebuilder 实战演练 之 开发多版本CronJob

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Kubernetes operator学习 系列文章&#xff0c;本节会在上一篇开发的Cronjob基础上&#xff0c;进行 多版本Operator 开发的实战 本文的所有代码&#xff0c;都存储于github代码库&#xff1a;https://github.c…

【全面了解自然语言处理三大特征提取器】RNN(LSTM)、transformer(注意力机制)、CNN

目录 一 、RNN1.RNN单个cell的结构2.RNN工作原理3.RNN优缺点 二、LSTM1.LSTM单个cell的结构2. LSTM工作原理 三、transformer1 Encoder&#xff08;1&#xff09;position encoding&#xff08;2&#xff09;multi-head-attention&#xff08;3&#xff09;add&norm 残差链…

【C语言】指针基础知识(一)

计算机上CPU&#xff08;中央处理器&#xff09;在处理数据的时候&#xff0c;需要的数据是在内存中读取的&#xff0c;处理后的数据也会放回内存中。 一,内存和地址 内存被分为一个个单元&#xff0c;一个内存单元的大小是一个字节。 内存单元的编号&#xff08;可以理解为门…

2024年值得创作者关注的十大AI动画创新平台

别提找大型工作室制作动画了。如今,AI平台让我们就可以轻松制作动画。从简单的文本生动画功能到复杂的角色动作,这些平台为各种类型的创作者提供了不同的功能。 AI已经有了长足的发展,现在它可以理解复杂的人类动作和艺术意图,将简单的输入转化成丰富而详细的动画。 下面…

【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

全套笔记资料代码移步&#xff1a; 前往gitee仓库查看 感兴趣的小伙伴可以自取哦&#xff0c;欢迎大家点赞转发~ 全套教程部分目录&#xff1a; 部分文件图片&#xff1a; 认识Vue3 1. Vue3组合式API体验 通过 Counter 案例 体验Vue3新引入的组合式API vue <script> ex…

AJAX学习(四)

版权声明 本文章来源于B站上的某马课程&#xff0c;由本人整理&#xff0c;仅供学习交流使用。如涉及侵权问题&#xff0c;请立即与本人联系&#xff0c;本人将积极配合删除相关内容。感谢理解和支持&#xff0c;本人致力于维护原创作品的权益&#xff0c;共同营造一个尊重知识…

C++内存分布与动态内存管理

文章目录 :dizzy: C/C内存分布:dizzy:C语言中动态内存管理方式  :sparkles:malloc   :sparkles:calloc  :sparkles:reallocfree :dizzy:C语言中动态内存管理方式  :sparkles:new和delete操作内置类型  :sparkles:new和delete操作自定义类型 :dizzy:operator new与ope…

数星星 刷题笔记 (树状数组)

依题意 要求每个点 x, y 的左下方有多少个星星 又因为 是按照y从小到大 给出的 所以 我们在计算个数的时候是按照y一层层变大来遍历的 因此我们在处理每一个点的时候 只需要看一下 当前的点有多少个点的x值比当前点小即可 树状数组的 操作模板 P3374 【模板】树…

动态规划题目集一(代码 注解)

目录 介绍&#xff1a; 题目一: 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 题目五&#xff1a; 题目六&#xff1a; 题目七&#xff1a; 题目八&#xff1a; 题目九&#xff1a; 介绍&#xff1a; 动态规划是一种算法设计技术&#xff0c;用于解决具有重叠…