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 = this
      setInterval(function() {
        _this.model.sex = "2"
        console.log("--", _this.model)
      }, 3000)
    },
    methods: {
    }
  };
</script>

<style>

</style>

 

可以看到的是 通过 v-bind 绑定的数据, 操作了 界面, 但是 界面没有更新, 界面没有更新是因为 数据没有更新

9a111fdbaebd4f13a6d2e2fe941439c0.gif

 

 

v-mode 和 v-bind 的差异

当代码为 v-bind 的时候, 我们看一下 el-select 的 模部分的处理, 只是传入了一个 value 的值

784109ae527e42d886935f6afd39204a.png

 

绑定数据为 v-model 的时候, 除了注册 value 的绑定之外, 还注册了一个 callback 回调

这个 callback 回调, 就是 视图 -> 模型 数据同步的一个关键的地方

视图上有数据更新的话, 视图的处理回调链路上面会增加一个这个回调, 来更新 vm.model.sex 的数据, 使得模型拿到的是 视图的最新的数据

178b1d235a5a4318ab26c82268218b99.png

 

 

v-model 的数据绑定 和 视图->数据处理函数的绑定

在 v-model 的情况如下

这里将 model 中的配置提取到了 props 和 事件映射 中

v-model 如果配置属性名称, 默认取 value, 如果没有配置 事件名称, 默认取 input 事件

我们这里关注的属性, 这里 props 配置为 props[value] = “1” 

422e25c6244a4e10ab4ec24bc74d836c.png

 

接下来就是, 从 attrs, props 中提取需要传递给子组件的 props 数据

这里可以看到上面的 v-model 转换之后的结果, 传入给子组件的 value 为 “1”, 注册了一个 input 的处理函数, 其中包含了 _vm.$set(_vm.model, “sex”, $$v) 的回调处理

0a8a98f6f612468d9be2c36efc4bc168.png

 

从 attrs 和 props 中采集需要传递给子组件的属性列表, 优先从 props 中获取

756ab227360a44ccb1ddf4bcce2309aa.png

 

 

v-bind 的数据绑定

这边的数据绑定是通过 attrs 来进行交互的

app.vue 上面生成了创建 el-select 的时候, 需要传入 value = “1” 

这里从 attrs 中解析需要传递给子组件的 props 数据

注意 这里没有 input 的回调处理事件, 这个在 app.vue 变异之后的结果中也能看到

ef8613d1087a4ea8b4e507428380fa8e.png

 

 

数据 -> 视图 的初次绑定

是在 el-select 的 mounted 中, 这里获取 value 对应的 option

然后更新 选中的对象, 选中的 label 展示给用户

这里的 selectedLabel 为 el-select 这边展示给用户的选中的数据的标签, 这个具体可以参见 el-select 的实现

64d101be92cd49138d1b4accdaa0b0ef.png

 

el-select 中展示给用户的 输入框

a97773a95195443da7e3e0266b853c71.png

 

 

数据 -> 视图 的同步绑定

这个是基于 vue 本身的响应式机制, 响应式属性更新的时候回级联更新 属性, class, dom事件, dom属性, 样式 等等

 

这个就在 patchVNode 里面一看就好了

同步更新 属性, class, dom事件, dom属性, 样式 等等

属性主要是指的是 dom 元素的 set/getAttribute 读写的相关数据

dom属性主要是指的是 dom 元素 本身的各个字段  

c181fafcc4634fc7b0580e66ad1698d1.png

 

注意 v-bind 虽然没有 视图 -> 数据 的同步绑定, 但是 它的 数据 -> 视图 的绑定这部分是由 vue 本身的响应式机制提供支持的, 是没有问题的

将 el-select 的 value 传入更新为 :value="model.sex", 然后 三秒之后 model.sex 在 setInterval 中更新, 然后可以看到 视图也更新了

31df12f80986491c88ca8cf6eadd26d9.gif

 

 

v-model 中 视图 -> 数据 的同步绑定

整个流程是通过 vue 的 input 事件串联起来的

用户这边点击的是 select 下面的 option, 实现 option 的 dom 元素是一个 li, li 上面注册了一个 click 事件, 如下, 提交了一个 事件给父组件

ea45ed968b8f4174b6e2665f686da98f.png

1aa066e3be0047309eff581391cb1dbc.png

 

select 组件这边处理的时候, 又给 父组件提交了一个 input 事件, 携带了最新的 value

574c2b80f3a8453aaba6b7fd22ae4dad.png

 

select 的父组件就是 我们这边的业务组件了, 由编译的时候 注册了一个 input 事件的处理函数

这里 $$v 拿到的是 用户选择的最新的值, 然后 这里的通过 input 事件的回调 来更新了模型上面的数据

17efcffeee30489aaeb7d3e2e4a963a7.png

 

 

项目中可能碰到的 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, 但是 最终的结果就像是 没有点击一样

dfd17ed70df6449a91a89d8ab3fbc2da.png

 

操作的现象如下

d4b4e7cc15e7486c80af8c842e678ae5.gif

 

解决的方式, 视图中使用了 model.sex, 在 data 下面的 model 下面将 sex 枚举出来

或者 首次初始化 model.sex 的时候, 使用 $set, this.$set(this.model, "sex", "1") 

 

 

完 

 

 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

进程、线程、协程

进程、线程、协程 进程、线程、协程进程概念生命周期进程的五状态模型进程同步机制进程通信机制死锁进程调度算法 线程概念生命周期线程同步机制互斥锁信号量条件变量读写锁 线程通信机制线程死锁 协程进程、线程、协程对比进程与线程比较协程与线程比较 如何选择进程、线程、协…

【Vue3】el-checkbox-group实现权限配置和应用

一. 需求 针对不同等级的用户&#xff0c;配置不同的可见项 配置效果如下 &#xff08;1&#xff09;新增&#xff0c;获取数据列表 &#xff08;2&#xff09;编辑&#xff0c;回显数据列表 应用效果如下 &#xff08;1&#xff09;父级配置 &#xff08;2&#xff09;子级…

【Selenium+python】自动化测试登录界面

前言&#xff1a;已经学习selenium许久了&#xff0c;奈何公司的项目还在码代码中...&#xff0c;感觉自己学的东西快忘的差不多了&#xff0c;所以就找个网站练练手&#xff0c;顺便回顾一下UI自动化的知识&#xff0c;也希望跟我一样的小白有所受益。 一、用例分析&#xff…

Benjamin Button‘sLetter to Daughter 英语阅读

Benjamin ButtonsLetter to Daughter 来源: The Curious Case of Benjamin Button 官方翻译 For what its worth: Its never too late, or in my case, too early to bewhoever you want to be. Theres no time limit. Start whenever you want. You can change or stay t…

向量点乘有哪些作用呢

如下&#xff1a; 1.找到两个向量之间的夹角(不用多说) 2.求一个向量投影在另一个向量的投影&#xff1a; 我们把图中b的在a上的投影向量称作b1吧&#xff0c;因为b1就在a上&#xff0c;所以只需要求出b1的大小&#xff0c;然后乘以a的单位向量&#xff0c;我们就得到向量b1了…

【LeetCode热题100】114. 二叉树展开为链表(二叉树)

一.题目要求 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 …

KeepAlived使用介绍

目录 1、Introduce 2、基本使用 &#xff08;1&#xff09;安装 &#xff08;2&#xff09;配置文件 &#xff08;3&#xff09;使用教程 1、Introduce keepalived是一个用于实现高可用性和负载均衡的开源软件。它提供了一种轻量级的方式来管理多个服务器&#xff0c;并确保…

隐私计算实训营学习六:隐语PIR介绍及开发指南

文章目录 一、隐语实现的PIR总体介绍1.1 PIR的定义和种类1.2 隐语PIR功能分层 二、Index PIR-SealPIR介绍三、Keyword PIR- Labeled PSI介绍四、隐语PIR后续计划 一、隐语实现的PIR总体介绍 1.1 PIR的定义和种类 PIR(Private Information Retrieval PIR)隐匿查询&#xff1a;…

YOLOv8改进 | 低照度检测 | 2024最新改进CPA-Enhancer链式思考网络(适用低照度、图像去雾、雨天、雪天)

一、本文介绍 本文给大家带来的2024.3月份最新改进机制&#xff0c;由CPA-Enhancer: Chain-of-Thought Prompted Adaptive Enhancer for Object Detection under Unknown Degradations论文提出的CPA-Enhancer链式思考网络&#xff0c;CPA-Enhancer通过引入链式思考提示机制&am…

使用虚幻引擎为AR体验提供动力

Powering AR Experiences with Unreal Engine ​​​​​​​ 目录 1. 虚幻引擎概述 2. 虚幻引擎如何为AR体验提供动力 3. 虚幻引擎中AR体验的组成部分是什么&#xff1f; 4. 使用虚幻引擎创建AR体验 5. 虚幻引擎中AR的优化提示 6. 将互动性融入AR与虚幻引擎 7. 在AR中…

C++_Function包装器和bind

文章目录 前言第一种第二种 仿函数第三种 lambda表达式 一、Function包装器二、使用场景三、std::bind 前言 到目前为止的学习&#xff0c;我们知晓了三种方式来传函数。 第一种 #include<iostream>int Plus(int i, int j) {return i j; }int main() {int(*func)(int…

从大厂裸辞半年,我靠它成功赚到了第一桶金,如果你失业了,建议这样做,不然时间太久了就完了

程序员接私活和创业是许多技术从业者关注的话题。下面我将介绍一些程序员接私活和创业的渠道和建议&#xff1a; 接私活的渠道&#xff1a; 自媒体平台&#xff1a; 可以利用社交媒体、个人博客、技术社区等平台展示自己的作品和技能&#xff0c;吸引潜在客户。自由工作平台&…

竞赛课第五周(并查集+Treap树的应用)

目的&#xff1a; &#xff08;1&#xff09;熟悉并掌握并查集的应用 &#xff08;2&#xff09;熟悉并掌握BST &#xff08;3&#xff09;熟悉并掌握Treap树的建立与应用 实验内容&#xff1a; 1.并查集 poj 1611 嫌疑人 严重急性呼吸系统综合症 (SARS) 是一种病因不明的…

书生·浦语大模型-第一节课笔记

视频总结 23年发布的模型在一些材料中归位指令微调模型&#xff0c;后面逐渐升级应该已经是train的模型了 技术报告总结 InternLM2 Technical Report 评测与特点 6 dimensions and 30 benchmarks, long-context modeling, and open-ended subjective evaluations长文本…

智能革命:ChatGPT3.5与GPT4.0的融合,携手DALL·E 3和Midjourney开启艺术新纪元

迷图网(kk.zlrxjh.top)是一个融合了顶尖人工智能技术的多功能助手&#xff0c;集成了ChatGPT3.5、GPT4.0、DALLE 3和Midjourney等多种智能系统&#xff0c;为用户提供了丰富的体验。以下是对这些技术的概述&#xff1a; ChatGPT3.5是由OpenAI开发的一个自然语言处理模型&#x…

设计模式学习笔记 - 设计模式与范式 -行为型:2.观察者模式(下):实现一个异步非阻塞的EventBus框架

概述 《1.观察者模式&#xff08;上&#xff09;》我们学习了观察者模式的原理、实现、应用场景&#xff0c;重点节介绍了不同应用场景下&#xff0c;几种不同的实现方式&#xff0c;包括&#xff1a;同步阻塞、异步非阻塞、进程内、进程间的实现方式。 同步阻塞最经典的实现…

springboot配置文件application.properties,application.yml/application.yaml

application.properties Springboot提供的一种属性配置方式&#xff1a;application.properties 初始时配置文件中只有一行语句。 启动时&#xff0c;比如tomcat的端口号默认8080&#xff0c;路径默认。如果我们要改变端口号及路径之类的可以在application.properties中配置。…

基于微信小程序的自习室预约系统的设计与实现

基于微信小程序的自习室预约系统的设计与实现 文章目录 基于微信小程序的自习室预约系统的设计与实现1、前言介绍2、功能设计3、功能实现4、开发技术简介5、系统物理架构6、系统流程图7、库表设计8、关键代码9、源码获取10、 &#x1f389;写在最后 1、前言介绍 伴随着信息技术…

ESP8266 WiFi物联网智能插座—上位机软件实现

1、软件架构 上位机主要作为下位机数据上传服务端以及节点调试的控制端&#xff0c;可以等效认为是专属版本调试工具。针对智能插座协议&#xff0c;对于下位机进行可视化监测和管理。 软件技术架构如下&#xff0c;主要为针对 Windows 的PC 端应用程序&#xff0c;采用WPF以及…

pyqt 创建右键菜单栏

class MainModule(QMainWindow, Ui_MainWindow):def __init__(self):super().__init__(parentNone)self.setupUi(self)# 允许出现菜单栏self.tableWidget.setContextMenuPolicy(Qt.CustomContextMenu)# 对空间添加右键菜单栏处理 self.tableWidget.customContextMenuRequested.…