MVVM、响应式、数据的双向绑定

已于 2023-03-13 16:03:42 修改
阅读量627 收藏 4
点赞数
分类专栏： vue 文章标签： vue.js
于 2020-12-11 17:00:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wytraining/article/details/111040184
版权
本文详细介绍了MVVM模式，包括MVVM的概念、与MVC的区别，以及数据的响应式原理。重点讨论了如何实现数据的双向绑定，提到了Object.defineProperty和Proxy在数据劫持中的应用，并解释了v-model指令的工作机制。
摘要由CSDN通过智能技术生成

一：MVVM

1：什么是MVVM

  • Model代表模型：用来修改数据和处理业务逻辑；
  • View代表视图：是用户在屏幕上看到的结构、布局和外观（UI）；
  • ViewModel是视图模型：就是一个同步器，用来同步view和model的一个对象。在MVVM框架下，view和model之间是没有直接联系的，他们是通过ViewModel进行交互的。

2：MVVM模式

  • MVVM是一种设计思想，实现了数据的双向绑定，当改变了model的数据，view会自动更新；改变view时，model的数据也会自动更新。（它是在单向绑定的基础上，给可输入元素input、textare等添加了input/change事件，通过触发事件来动态修改model）【v-model语法糖】
  • ViewModel的实现原理是通过数据劫持（Object.defineProperty）【响应式】

3：MVC和MVVM的区别

  1. MVC中Controller(控制器)演变成MVVM中的ViewModel
  2. MVVM通过数据来显示视图层而不是节点操作
  3. MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验

二

最低0.47元/天 解锁文章
wytraining
关注
专栏目录
mvvm&MVC、观察者模式、双向绑定原理、虚拟dom、diff算法、响应式布局
qq_33262202的博客
07-21 1092
双向绑定原理、虚拟dom
vue相关（ 适合先接触react 然后再接触vue的 ）
qq_37653449的博客
08-04 1004
vue 中的自定义事件 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！ 每个vue实例都有触发事件的方法 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。然后再对应子组件方法执行处触发事件，两者缺一不可 in父组件 ...
VUE 双向数据绑定
最新发布
喝旺仔la的博客
09-10 465
Vue 的双向数据绑定是其核心特性之一，它允许视图（模板中的 HTML）和 JavaScript 应用程序状态之间保持同步。在 Vue 中，这通常是通过使用v-model指令来实现的，尽管在底层，Vue 实际上是通过发布-订阅模式（也称为观察者模式）来实现这一功能的。
浅谈vue 之双向绑定和响应式（vue的响应式）
python181的博客
03-19 1122
浅谈vue 之双向绑定和响应式（vue的响应式）
Vue双向数据绑定和Vue响应式
小魔仙的成长之路
04-19 499
当属性的值发生改变时，会自动地检测到变化并更新对应的视图。双向数据绑定和响应式都是 Vue 中非常重要的概念，但是它们的区别在于前者是一种数据流动的方式，后者是实现数据绑定的机制。Vue 首先对 data 对象中的每个属性都创建了一个观察者对象，即一个 Dep 对象，这个对象会收集所有订阅该属性变化的观察者对象（即 Watcher 对象）。当用户输入时，事件监听器会调用该元素的 updateModelValue() 方法，该方法会将输入框的值赋给对应的 data 属性，并通知该属性的 Dep 对象。
ios架构与开发第五课 BFF、MVVM和响应式编程
fegus的博客
05-07 890
15 跨平台架构：如何设计 BFF 架构系统？ 上一模块，我和你介绍了iOS 工程化实践中的基础组件设计， 接下来这部分，我们将进入核心内容：移动端系统架构的设计与实现。 首先请你想一想：如果没有一套灵活的可扩展的系统架构，结果会怎样？ 这方面我深有感触，在我们的 App 没有良好的系统架构之前，每一个微小的改动都需要“大动干戈”。具体来说，由于强耦合性，每次改动我们都需要和各个业务部门商讨详细的技术方案；功能开发完毕后，又要协调各个部门进行功能回归测试。整个过程下来，不仅耗费太多精力和时间，还容易在跨部
前端MVVM框架解析之双向绑定
08-28
总结来说，MVVM框架中的双向绑定通过数据劫持和响应式系统实现了View与Model之间的实时同步，极大地简化了前端开发中的数据管理，提高了开发效率和用户体验。通过理解这一机制，开发者可以更好地利用React、Vue、...
MVVM实现数据双向绑定
02-18
3. **响应式系统**：一些MVVM框架如Vue和RxJS具有内置的响应式系统，可以自动追踪依赖关系，当数据变化时，相关的计算也会自动更新。 4. **隔离和通信**：在大型应用中，多个ViewModel之间可能存在数据交换的需求。...
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定
08-04
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定 帮你理解什么是数据劫持 什么是发布者-订阅者模式 帮你理解Vue内部是如何实现的双向数据绑定 了解Observer Dep Watcher三者之间的关系
Vue双向数据绑定(MVVM)的原理
10-14
在Vue中，当我们在Vue实例中声明的数据属性被修改时，Vue的响应式系统会自动跟踪这些变化。 2. View: 这是用户看到和与之交互的界面。Vue通过模板语法将数据绑定到HTML元素上，当Model中的数据发生变化时，View会...
class03：MVVM模型与响应式原理
qq_51667621的博客
03-10 1324
MVVM，即Model 、View、ViewModel。
MVVM 和 响应式编程入门
weixin_34376562的博客
04-09 347
目录 MVVM 和 响应式编程入门 架构的思考 App 的本质是反馈回路 App 的任务 回顾 MVC MVC 模块职责 MVC 总结 MVC 是万能的吗？ MVVM - C ...
MVVM与Vue响应式的实现
weixin_小白鼠的博客
12-04 476
M：模型 ==》data中的数据V：视图 ==》模板VM：视图模型 ==》Vue实例对象ViewModel是一个中间的桥梁将视图View与模型Model连接起来，ViewModel内部通过数据绑定，实现数据变化，视图发生更新变化，通过数据劫持实现的数据绑定；通过dom监听，实现事件触发,调用对应的回调函数，比如更新数据（数据变化了，视图就会更新–数据绑定）Vue 的设计也受到了MVVM的启发，View对应的是dom，它的ViewModel对应的式Vue实例，,Model对应的是data对象；通过数据劫持来实
【前端知识之Vue】双向数据绑定以及响应式的原理
weixin_44337386的博客
06-22 6128
本系列主要整理前端面试中需要掌握的知识点。本节介绍双向数据绑定以及响应式的原理，回答了双向数据绑定和数据响应式是相同的吗？
(Vue)MVVM的响应式原理
weixin_44320877的博客
02-10 822
MVVM简介   MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Mo...
vue2 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法
朝阳39的博客
04-12 882
vue 的更新过程，是一种异步渲染，即并不是每一点 data 的改变都会立马触发视图更新， 而是会汇总 data 的修改，再一次性更新视图，这样可以减少 DOM 的操作次数，提高性能。vue 文件中支持指令、插值、JS 表达式，还能实现判断、循环，大大便捷了开发，但无法在浏览器中渲染，需要先将其转换成 JS 代码才行，这个转换的过程，即模板编译。vue 的响应式机制是在vue 实例初始化时建立的，即 data 函数中定义的变量，在页面初始化后，都具有响应式。1000 个节点，要计算1亿次，算法不可用！
响应式与双向绑定区别
buyiny123的博客
09-09 4085
有很多同学把双向绑定就等同于响应式 ， 其实是不对 的。 在这里我们分析 一下 二者的区别： 响应式： 响应式 单身的 （数据流向视图） 它是通过 Object.defineProperty（）实现的 特别要指出的是 ， option.data 中的选项都会被响应式，都会有一个观察者目标（dep）实例 ， 但不是所有的选项都能被收集响应式 依赖，只有当你getter 才会去收集选项依赖， setter时 ， 派发依赖更新， 实际上为通知当前渲染watcher更新视图。 双向绑定（v-model）
Vue 之响应式原理（双向绑定）
倚树探星的博客
02-13 1448
Learn from codewhy 在Vue的动态双向绑定中，主要有两个需求，一个是监听数据变化，另一个是响应数据变化。具体分析如下 一览图 一、监听数据变化 Vue 内部 通过 Object.defineProperty 监听对象属性的改变 在 set 方法中监听属性值变化，在 get 方法中获取属性值 1、set 中 将监听到发生变化的数据告诉数据的使用者–>首先，要知道哪些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值