当前位置: 首页 > news >正文

mvvm,vue双向数据绑定的原理

MVVM (Model-View-ViewModel) 是一种设计模式,主要用于构建用户界面。在 MVVM 中,Model 表示应用程序的数据,View 表示用户界面,而 ViewModel 是 Model 和 View 之间的连接器。MVVM 的核心思想是将视图与模型分离,使它们能够独立变化,从而简化复杂界面的开发。

Vue.js 是一个流行的前端框架,它基于 MVVM 模式,实现了双向数据绑定。这意味着当 Model 的数据发生变化时,View 会自动更新,反之亦然。

Vue 的双向数据绑定的原理大致如下:

  1. 数据劫持:Vue 使用 Object.defineProperty() 来劫持每个属性的 getter 和 setter,这样当数据变化时,可以触发相应的监听器。
  2. 发布订阅模式:当 Model 的数据发生变化时,Vue 不是直接去更新 View,而是通过发布一个消息(即“通知”),所有的订阅者(即监听器)都会收到这个消息,然后根据消息更新 View。
  3. 虚拟 DOM:Vue 使用虚拟 DOM 来提高性能。当数据发生变化时,Vue 会创建一个新的虚拟节点(VNode),然后与旧的 VNode 进行对比,找出差异,然后仅更新这些差异,而不是整个界面。
  4. 指令:Vue 提供了各种指令(如 v-model、v-for、v-if 等),这些指令是 Vue 模板的基础,它们帮助我们将 View 和 Model 绑定在一起。例如,v-model 指令就是实现双向数据绑定的关键。
  5. 组件系统:Vue 的组件系统是其核心特性之一。组件允许我们重用代码,并且每个组件都有自己的 View、Model 和 Controller。这使得构建复杂的用户界面变得更容易。

通过以上机制,Vue 实现了高效、简洁的双向数据绑定,从而简化了前端开发的工作

MVVM分为Model、View、ViewModel三者。
· Model 代表数据模型,数据和业务逻辑都在Model层中定义;
· View 代表UI视图,负责数据的展⽰;
· ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理⽤户交互操作;


实现数据的双向绑定,⾸先要对数据进⾏劫持监听,所以我们需要设置⼀个监听器Observer,⽤来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有⼀个消息订阅器Dep来专门收集这些订阅者,主要是在监听器Observer和订阅者Watcher之间进⾏统⼀管理


MVC模式将软件分为下⾯三个部分 1.视图(View) :⽤户界⾯ 2.控制器(Controller) :业务逻辑 3.模型(Model) :数据保存
vuex的state、getter、mutation、action、module特性分别是什么?
State:保存着所有的全局变量
Getter: store中的计算属性,就像计算属性⼀样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发⽣了改变才会被重新计算。 getters接收state作为其第⼀个参数,接受其他 getters 作为第⼆个参数,如不需要,第⼆个参数可以省略。
Mutation:更改 Vuex 的 store 中的状态的唯⼀⽅法是提交 mutation, mutation 必须是同步函数
Action: Action 可以包含任意异步操作, 在组件中使⽤ this.$store.dispatch(‘xxx’) 分发 action
Module:可以写很多模块,Vuex 允许我们将 store 分割到模块(module)。每个模块拥有⾃⼰的
state、mutation、action、getters,最后都引⼊到⼀个⽂件。分散管理。
 

http://www.lryc.cn/news/269519.html

相关文章:

  • 【Java中序列化的原理是什么(解析)】
  • 冠赢互娱基于 OpenKrusieGame 实现游戏云原生架构升级
  • Mybatis 动态 SQL - trim, where, set
  • 大模型系列:OpenAI使用技巧_使用OpenAI进行K-means聚类
  • 共享单车之数据分析
  • Spring的Bean你了解吗
  • MongoDB聚合:$merge 阶段(1)
  • 2. 云原生实战之kubesphere搭建
  • main参数传递、反汇编、汇编混合编程
  • 前后端分离nodejs+vue医院预约挂号系统6nrhh
  • 在pytorch中,读取GPU上张量的数值 (数据从GPU到CPU) 的几种常用方法
  • 【mysql】—— 表的内连和外连
  • VSCode远程开发配置
  • 复数值神经网络可能是深度学习的未来
  • 【C语言】数据结构——排序二(快排)
  • 企业私有云容器化架构
  • SpringBoot+modbus4j实现ModebusTCP通讯读取数据
  • Linux性能优化全景指南
  • 树莓派 ubuntu20.04下 python调讯飞的语音API,语音识别和语音合成
  • 分布式系统架构设计之分布式系统实践案例和未来展望
  • 【办公软件】Excel双坐标轴图表
  • 彻底理解前端安全面试题(1)—— XSS 攻击,3种XSS攻击详解,建议收藏(含源码)
  • UE5.1_AI随机漫游
  • 智慧城市新型基础设施建设综合方案:文件全文52页,附下载
  • GitHub Copilot 终极详细介绍
  • LeetCode第63题 - 不同路径 II
  • python+django网上银行业务综合管理系统vue_bvj8b
  • 【软件工程】走进瀑布模型:传统软件开发的经典之路
  • 两个字符串间的最短路径问题 (100%用例)C卷 (JavaPythonNode.jsC语言C++)
  • 通过ADB来实现脚本来控制手机