53 v-bind 和 v-model 的实现和区别
前言
这个主要的来源是 偶尔的情况下 出现的问题
就比如是 el-select 中选择组件之后, 视图不回显, 然后 model 不更新等等
这个 其实就是 vue 中 视图 -> 模型 的数据同步, 我们通常意义上的处理一般是通过 模型 -> 数据 的数据同步, 比如 我们代码里面更新了 model.sex 从 ”男” 更新为 ”女”, 然后 el-input 中对应的输入框的值也从 从 ”男” 更新为 ”女”
然后 我们这里关注的问题是, 比如 我在 el-input 将 “男” 更新为 “女”, 传递到 model.sex 的问题
我们这里主要关注的就是 v-model 和 v-bind 的具体实现
然后 这个在 以前初学的情况下, 视图 -> 模型 的同步问题
这里 来看一下 这个问题的细节
主要的传递方式为 v-model 和 v-bind, “v-bind:value“ 可以简写为 “:value”
v-model 是 视图 <-> 模型 数据双向同步的
v-bind 是 模型 -> 视图 数据单向同步的
然后 这种 视图 -> 模型 数据不同步的情况 一般是 v-bind 的情况
其他的一些情况 模型 -> 视图 数据不同步的情况, 可以参见
el-dialog 的 appendToBody 属性, 导致 vue 响应式失效
el-tree defaultCheckedKeys配置 和 树上面选中节点不同步问题
特定的操作之后响应式对象不“响应“了(一)
特定的操作之后响应式对象不“响应“了(二)
直接使用 dom api 更新了 #text节点, 之后响应式更新不生效了
测试用例
测试用例如下
<template><div class="testParent" ><el-select :value="model.sex" >
<!-- <el-select v-model="model.sex" >--><el-option v-for="item in sexList" :key="item.code" :label="item.name" :value="item.code"></el-option></el-select><!-- <el-input :value="model.sex" ></el-input>-->
<!-- <el-input v-model="model.sex" ></el-input>--></div>
</template><script>export default {name: 'App',components: {},data() {return {model: {sex: "1"},sexList: [{code: "1", name: "男"},{code: "2", name: "女"},]};},computed: {},created() {},mounted() {let _this = thissetInterval(function() {_this.model.sex = "2"console.log("--", _this.model)}, 3000)},methods: {}};
</script><style></style>
可以看到的是 通过 v-bind 绑定的数据, 操作了 界面, 但是 界面没有更新, 界面没有更新是因为 数据没有更新
v-mode 和 v-bind 的差异
当代码为 v-bind 的时候, 我们看一下 el-select 的 模部分的处理, 只是传入了一个 value 的值
绑定数据为 v-model 的时候, 除了注册 value 的绑定之外, 还注册了一个 callback 回调
这个 callback 回调, 就是 视图 -> 模型 数据同步的一个关键的地方
视图上有数据更新的话, 视图的处理回调链路上面会增加一个这个回调, 来更新 vm.model.sex 的数据, 使得模型拿到的是 视图的最新的数据
v-model 的数据绑定 和 视图->数据处理函数的绑定
在 v-model 的情况如下
这里将 model 中的配置提取到了 props 和 事件映射 中
v-model 如果配置属性名称, 默认取 value, 如果没有配置 事件名称, 默认取 input 事件
我们这里关注的属性, 这里 props 配置为 props[value] = “1”
接下来就是, 从 attrs, props 中提取需要传递给子组件的 props 数据
这里可以看到上面的 v-model 转换之后的结果, 传入给子组件的 value 为 “1”, 注册了一个 input 的处理函数, 其中包含了 _vm.$set(_vm.model, “sex”, $$v) 的回调处理
从 attrs 和 props 中采集需要传递给子组件的属性列表, 优先从 props 中获取
v-bind 的数据绑定
这边的数据绑定是通过 attrs 来进行交互的
app.vue 上面生成了创建 el-select 的时候, 需要传入 value = “1”
这里从 attrs 中解析需要传递给子组件的 props 数据
注意 这里没有 input 的回调处理事件, 这个在 app.vue 变异之后的结果中也能看到
数据 -> 视图 的初次绑定
是在 el-select 的 mounted 中, 这里获取 value 对应的 option
然后更新 选中的对象, 选中的 label 展示给用户
这里的 selectedLabel 为 el-select 这边展示给用户的选中的数据的标签, 这个具体可以参见 el-select 的实现
el-select 中展示给用户的 输入框
数据 -> 视图 的同步绑定
这个是基于 vue 本身的响应式机制, 响应式属性更新的时候回级联更新 属性, class, dom事件, dom属性, 样式 等等
这个就在 patchVNode 里面一看就好了
同步更新 属性, class, dom事件, dom属性, 样式 等等
属性主要是指的是 dom 元素的 set/getAttribute 读写的相关数据
dom属性主要是指的是 dom 元素 本身的各个字段
注意 v-bind 虽然没有 视图 -> 数据 的同步绑定, 但是 它的 数据 -> 视图 的绑定这部分是由 vue 本身的响应式机制提供支持的, 是没有问题的
将 el-select 的 value 传入更新为 :value="model.sex", 然后 三秒之后 model.sex 在 setInterval 中更新, 然后可以看到 视图也更新了
v-model 中 视图 -> 数据 的同步绑定
整个流程是通过 vue 的 input 事件串联起来的
用户这边点击的是 select 下面的 option, 实现 option 的 dom 元素是一个 li, li 上面注册了一个 click 事件, 如下, 提交了一个 事件给父组件
select 组件这边处理的时候, 又给 父组件提交了一个 input 事件, 携带了最新的 value
select 的父组件就是 我们这边的业务组件了, 由编译的时候 注册了一个 input 事件的处理函数
这里 $$v 拿到的是 用户选择的最新的值, 然后 这里的通过 input 事件的回调 来更新了模型上面的数据
项目中可能碰到的 v-model 双向绑定失效的情况
这种情况主要的来源是 绑定的对象不是响应式对象, 因此 造成了 el-select 提交 input 事件之后, 业务组件这边虽然有 _vm.$set(_vm.model, "sex", $$v), 但是 model.sex 不是响应式对象, 造成了级联更新通知, 等等 存在问题
注意观察如下的 model.sex 属性, 是在函数中使用 model.sex 创建的属性, 这种方式创建的属性不是响应式的, 然后 导致了上面的问题, 所以 编码的时候, 视图中使用到的属性, 最好是在 data 中枚举出来, 避免一些 不必要的响应式的问题
复现的方式如下
<template><div class="testParent" >
<!-- <el-select :value="model.sex" >--><el-select v-model="model.sex" ><el-option v-for="item in sexList" :key="item.code" :label="item.name" :value="item.code"></el-option></el-select><!-- <el-input :value="model.sex" ></el-input>-->
<!-- <el-input v-model="model.sex" ></el-input>--></div>
</template><script>export default {name: 'App',components: {},data() {return {model: {},sexList: [{code: "1", name: "男"},{code: "2", name: "女"},]};},computed: {},created() {},mounted() {let _this = this_this.model.sex = "1"setInterval(function() {_this.model.sex = "2"console.log("--", _this.model)}, 3000)},methods: {}};
</script><style></style>
如下, model.sex 没有响应式的 setter, getter, el-select 中虽然提交了一个 input 的事件
业务组件这边 也有 _vm.$set(_vm.model, "sex", $$v) 处理, 但是这里仅仅是更新了 model.sex 的值, 没有响应式的相关级联操作
因此 造成了数据通知给 el-select 存在问题, 然后 造成了 el-select 这边, 虽然 我们点击了该 option, 但是 最终的结果就像是 没有点击一样
操作的现象如下
解决的方式, 视图中使用了 model.sex, 在 data 下面的 model 下面将 sex 枚举出来
或者 首次初始化 model.sex 的时候, 使用 $set, this.$set(this.model, "sex", "1")
完
相关文章:
53 v-bind 和 v-model 的实现和区别
前言 这个主要的来源是 偶尔的情况下 出现的问题 就比如是 el-select 中选择组件之后, 视图不回显, 然后 model 不更新等等 这个 其实就是 vue 中 视图 -> 模型 的数据同步, 我们通常意义上的处理一般是通过 模型 -> 数据 的数据同步, 比如 我们代码里面更新了 model.…...
VMware-16.0配置虚拟机网络模式
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、为什么要配置网络?二、配置步骤1.检查VMware服务2.进入配置页面3.添加网络模式1.Bridge2.NAT3.Host-only 4.DHCP租约5.静态IP 三、使用总结 前言…...
element-ui badge 组件源码分享
今日简单分享 badge 组件的源码实现,主要从以下两个方面: 1、badge 组件页面结构 2、badge 组件属性 一、badge 组件页面结构 二、badge 组件属性 补充几个标签的用途: sub:下标、sup:上标、var 变量 代码如下&am…...
MySQL中日期有关函数
本次记录了获取日期时间的多种方式,还有日期和字符串之间的转换,以及加减日期的操作。 获取时间 # 1.获取当前时间(年月日时分秒格式) select now();# 2.获取当前时间(年月日格式) select curdate();# 3.获取当前时间(时分秒格式) select curtime();# 4.…...
jdbc工具类
jdbc 工具类,具体见下面代码,直接可以用。 /*** version 1.0* descpription: jdbc工具类* date 2024/4/6*/ public class JDBCUtils {private static final String URL "jdbc:mysql://127.0.0.1:3306/mybatis";private static final String …...
Svelte Web 框架介绍
Svelte 是一个用于构建网络应用程序的现代框架,它与其他用户界面框架(如React和Vue)有着本质的不同。Svelte 的核心理念是在构建应用程序时,将大部分工作转移到编译步骤中,而不是在用户的浏览器中运行时处理。这种方法…...
IP地址获取不到的原因是什么?
在数字化时代的今天,互联网已成为我们日常生活和工作中不可或缺的一部分。而IP地址,作为互联网通信的基础,其重要性不言而喻。然而,有时我们可能会遇到IP地址获取不到的问题,这会给我们的网络使用带来诸多不便。那么&a…...
Android APP加固利器:深入了解混淆算法与混淆配置
Android APP 加固是优化 APK 安全性的一种方法,常见的加固方式有混淆代码、加壳、数据加密、动态加载等。下面介绍一下 Android APP 加固的具体实现方式。 混淆代码 使用 ipaguard工具可以对代码进行混淆,使得反编译出来的代码很难阅读和理解ÿ…...
蓝桥杯真题Day47 倒计时6天:6道真题+回溯递归问题
[蓝桥杯 2019 省 A] 糖果 题目描述 糖果店的老板一共有M种口味的糖果出售。为了方便描述,我们将M 种口味编号 1∼ M。小明希望能品尝到所有口味的糖果。遗憾的是老板并不单独出售糖果,而是K 颗一包整包出售。 幸好糖果包装上注明了其中 K 颗糖果的口味…...
通过UDP实现参数配置
来讲讲UDP的一种常见应用 我们知道UDP是一种无连接的网络传输协议,在发送数据时指定目标IP及端口就可以将数据发送出去,因此特别适合用作网络设备发现。 我们可以自定义一个通信端口,假设为55555。我们再制定一个协议用于查询目标设备&#x…...
解析Apache Kafka:在大数据体系中的基本概念和核心组件
关联阅读博客文章:探讨在大数据体系中API的通信机制与工作原理 关联阅读博客文章:深入解析大数据体系中的ETL工作原理及常见组件 关联阅读博客文章:深度剖析:计算机集群在大数据体系中的关键角色和技术要点 关联阅读博客文章&a…...
独角数卡对接码支付收款教程
1、到码支付后台找到支付配置。2、将上面的复制依次填入,具体看下图,随后点立即添加 商户ID商户PID 商户KEY异步不能为空 商户密钥商户密钥...
vuepress-theme-hope 添加谷歌统计代码
最近做了个网站,从 cloudflare 来看访问量,过去 30 天访问量竟然有 1.32k 给我整懵逼了,我寻思不应该呀,毕竟这个网站内容还在慢慢补充中,也没告诉别人,怎么就这么多访问?搜索了下, cloudflare 还会把爬虫的请求也就算进来,所以数据相对来说就不是很准确 想到了把 Google An…...
LabVIEW太赫兹波扫描成像系统
LabVIEW太赫兹波扫描成像系统 随着科技的不断发展,太赫兹波成像技术因其非电离性、高穿透性和高分辨率等特点,在生物医学、材料质量无损检测以及公共安全等领域得到了广泛的应用。然而,在实际操作中,封闭性较高的信号采集软件限制…...
什么是stable diffusion?
🌟 Stable Diffusion:一种深度学习文本到图像生成模型 🌟 Stable Diffusion是2022年发布的深度学习文本到图像生成模型,主要用于根据文本的描述产生详细图像。它还可以应用于其他任务,如内补绘制、外补绘制࿰…...
KeyguardClockSwitch的父类
KeyguardClockSwitch 定义在KeyguardStatusView中, mClockView findViewById(R.id.keyguard_clock_container);KeyguardClockSwitch的父类为: Class Name: LinearLayout Class Name: KeyguardStatusView Class Name: NotificationPanelView Class Name: Notificat…...
Gradle系列(二):Groovy基础
Gradle系列(二):Groovy基础 本篇文章继续讲下Groovy一些基础的语法。 1:Map map与List的用法很像,只不过值是一个K:V的键值对。 下面是是Groovy中Map的定义: task testMap { def map [‘width’:1280,‘height’:1960] prin…...
PW1503限流芯片:可达3A限流,保障USB电源管理安全高效
在电源管理领域,开关的性能直接关系到设备的稳定性和安全性。今天,我们将详细解析一款备受关注的超低RDS(ON)开关——PW1503。它不仅具有可编程的电流限制功能,还集成了多项保护机制,为各类电子设备提供了高…...
深挖苹果Find My技术,伦茨科技ST17H6x芯片赋予产品功能
苹果发布AirTag发布以来,大家都更加注重物品的防丢,苹果的 Find My 就可以查找 iPhone、Mac、AirPods、Apple Watch,如今的Find My已经不单单可以查找苹果的设备,随着第三方设备的加入,将丰富Find My Network的版图。产…...
Web3 革命:揭示区块链技术的全新应用
随着数字化时代的不断发展,区块链技术作为一项颠覆性的创新正在改变着我们的世界。而在这一技术的进步中,Web3正逐渐崭露头角,为区块链技术的应用带来了全新的可能性。本文将探讨Web3革命所揭示的区块链技术全新应用,并展望其未来…...
[实战经验]Mybatis的mapper.xml参数#{para}与#{para, jdbcType=BIGINT}有什么区别?
在MyBatis框架中,传入参数使用#{para}和#{para, jdbcTypeBIGINT}的有什么区别呢? #{para}:这种写法表示使用MyBatis自动推断参数类型,并根据参数的Java类型自动匹配数据库对应的类型。例如,如果参数para的Java类型是Lo…...
高并发下的linux优化
针对高并发服务,对 Linux 内核和网络进行优化可以提高系统的性能和稳定性。本文将深入探讨如何对 Linux 内核和网络进行优化,包括调整内核参数、调整网络性能参数、使用 TCP/IP 协议栈加速技术、下面将介绍一些可用于优化Linux内核和网络的技术ÿ…...
不同设备使用同一个Git账号
想要在公司和家里的电脑上用同一个git账号来pull, push代码 1. 查看原设备的用户名和邮箱 第1种方法, 依次输入 git config user.name git config user.email第2种方法, 输入 cat ~/.gitconfig2. 配置新设备的用户名和邮箱 用户名和邮箱与原设备保持…...
蓝桥杯算法题:区间移位
题目描述 数轴上有n个闭区间:D1,...,Dn。 其中区间Di用一对整数[ai, bi]来描述,满足ai < bi。 已知这些区间的长度之和至少有10000。 所以,通过适当的移动这些区间,你总可以使得他们的“并”覆盖[0, 10000]——也就是说[0, 100…...
提取word文档里面的图片
大家好,我是阿赵。 阿赵我写博客的时候的习惯是,先用word文档写好,然后再把word文档里面的图片另存,最后再在博客里面复制正文和上传图片。 而我写的文章一般配图都比较多,所以经常要做的一个功能就是另存图片…...
MybatisPlus总结
一、MyBatis回顾 (1)什么是MyBatis:MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映…...
使用 mitmproxy 抓包 grpc
昨天在本地执行 grpc 的 quick start(python版本的),我了解 grpc 内部使用的是 HTTP2,所以我就想着抓包来试试,下面就来记录一下这个过程中的探索。 注意:我的电脑上面安装了 Fiddler Classic,…...
【解决Jetson Nano 内存不足问题】纯命令行将 Conda 环境迁移到 SD 卡
前言 Jetson Nano 板载只有 16GB 的存储空间,在安装完 Ubuntu 和 Conda 环境后,剩余空间就捉襟见肘了,无法满足安装 PyTorch 等大型包的需求。此时如果你有一张SD卡,那么可以考虑将 Conda 环境迁移到 SD 卡上。 但网上的教程基本…...
【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(七)- 向量算术指令格式
1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容: 这是一份关于向量扩展的详细技术文档,内容覆盖了向量指令集的多个关键方面,如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…...
顺序表的应用
文章目录 目录1. 基于动态顺序表实现通讯录项目2.顺序表经典算法2.1 [移除元素](https://leetcode.cn/problems/remove-element/description/)2.2 [合并两个有序数组](https://leetcode.cn/problems/merge-sorted-array/description/) 3. 顺序表的问题及思考 目录 基于动态顺序…...
wordpress 进销存插件/seo优化上海牛巨微
这题的关键点在于对数组的重排序方法,高度先由高到低排列不会影响第二个参数,因为list.add的方法在指定index后面插入,因此对于同高的人来说需要对第二个参数由低到高排,具体代码如下 1 public class Solution {2 public int[…...
wordpress bbs插件/深圳招聘网络推广
1. 前言:前几篇文章分享了下 MyBatis 拦截器的相关知识,这里再分享下自己项目中遇到的一个问题,然后通过自定义的拦截器快速的解决了问题。2. 项目用到的技术:SpringBoot,MyBatis.....3. 业务需求:最近项目…...
贵阳网站建设托管/嵌入式培训班一般多少钱
学习写一个最简单的web交互页面,可以向apache传送数据,通过cgi接受,并返回数据。 示例代码 View Code <input id"my" type"submit" value"submit"/><script type"text/javascript"> …...
为什么做美妆网站/重庆网站制作系统
目录 一. 介绍 基本介绍 JSON和JS对象的区别 二.JSON与其他类型的转换 JS对象与JSON转换 Java对象与JSON转换 三.Json语法 定义JSON格式数据 获取JSON格式数据中的值 遍历JSON数据 使用注解 四.案例-校验用户名是否存在 一. 介绍 基本介绍 JavScript Object Not…...
制作企业网站作业网页模板/优化大师电脑版
MQTT中的QoS等级 MQTT设计了一套保证消息稳定传输的机制,包括消息应答、存储和重传。在这套机制下,提供了三种不同层次QoS(Quality of Service): QoS0,At most once,至多一次; QoS…...
优秀网页界面设计/西安分类信息seo公司
本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 本文章来自腾讯云 作者:Python知识大全 想要学习Python?有问题得不到第一时间解决?来看看这里“1039649593”满足你的…...