【vue】vue中数据双向绑定原理/响应式原理,mvvm,mvc、mvp分别是什么

关于 vue 的原理主要有两个重要内容,分别是 mvvm 数据双向绑定原理,和 响应式原理

  1. MVC(Model-View-Controller)

    • Model(模型):表示应用程序的数据和业务逻辑。
    • View(视图):负责展示数据给用户,并且接受用户的输入。
    • Controller(控制器):负责处理用户的输入和操作,当用户与页面产生交互的时候开始工作,然后调用model 层修改model
    • view 和 model 应用了观察者模式,当 model 层发生改变的时候它会通知有关的view 层更新
    • 【箭头方向统一的三角形】
    • view -> controller ->model -> view
    • 缺点:view 层和 model 层 耦合在一起,当项目逻辑复杂是,会造成代码混乱。
  2. MVP(Model-View-Presenter)

    • Model(模型):同样表示应用程序的数据和业务逻辑。
    • View(视图):负责展示数据给用户,并且接受用户的输入。
    • Presenter(主持人):将 model 的变化和view 的变化绑定在一起,(1) 实现 view 和 model 同步更新,(2) 实现 view 和 model 的解藕,还包含了其他的响应逻辑
    • view -> presenter 
    • presenter -> view
    • presenter -> model【没有model-presenter 的箭头】
  3. MVVM(Model-View-ViewModel)

    • Model(模型):同样表示应用程序的数据和业务逻辑。
    • View(视图):负责展示数据给用户,并且接受用户的输入。
    • ViewModel(视图模型):负责将模型的数据转换为视图所需的格式,并且处理视图的用户交互。视图模型通过数据绑定与视图进行连接。
    • MVVM 模式通常利用双向数据绑定来实现视图和视图模型之间的通信。
    • 思想和 mvp 是相同的,不过通过双向数据绑定,将 view 和model 的同步更新自动化了
      •  model 发生变化,viewmodel 会自动更新
      • viewmodel 变化了, view 也会自动更新

vue 中 mvvm 数据双向绑定原理/响应式原理

本质【数据劫持】+【发布订阅模式】

        注意【发布订阅模式】和【观察者模式】是有区别的

  1. 数据劫持 Observer
    1. vue2 使用 Object.definedProperty
    2. vue3 使用 proxy
    3. 第一步,就是把所有的变量变成响应式对象,都能够触发对应的 getter 和 setter
    4. vue 会创建一个 dep 对象,存储当前属性的所有 watcher 对象【dep 类似于发布订阅中的那个存储所有事件的数组】【watcher 对象类似于发布订阅中的事件名称
    5. 【依赖收集】当属性的 getter 被访问时,watcher 对象将会被添加到 dep 中【相当于订阅发布中的 on 方法
    6. 当属性的 setter 被调用时,dep 中所有 watcher 对象将会被通知执行更新【相当于发布订阅中的 emit 方法
    7. 在数据劫持的步骤进行依赖收集
    8. observer 监听自己的 model 数据变化
  2. compile 模版编译
    1. 将vue模版编译成渲染函数【h 函数】
    2. vue 将模版中的数据绑定语法(如 {{}} 和 v-model)转换为对数据的 getter/setter 的调用
    3. 对每个指令对应的节点绑定更新函数【相当于发布订阅中的回调函数
    4. 添加监听数据的订阅者,数据变动时,收到通知,更新视图
  3. Watcher 监听器
    1. 对应发布/订阅模式中的订阅者【就是 on(''change-name", fn) 中的 change-name这个方法】
    2. 在自身实例化时往属性订阅器 dep 里添加自己
    3. 自身有一个更新函数
    4. dep.notice 通知时,调用自身的 update 方法,并触发 compile绑定的回调
    5. 利用 watcher 搭起 observer 和 compile 之间的通信桥梁
    6. 达到 数据变化 -> 视图更新,视图交互变化-> 数据 model 变化的双向绑定效果

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

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

相关文章

edge 安装笔记

依赖项: jukebox 下载代码GitHub - rodrigo-castellon/jukebox 拷贝到根目录即可,文件夹留一个根目录jukebox vqvae_cache_path cache_dir "/vqvae.pth.tar" prior_cache_path cache_dir "/prior_level_2.pth.tar"

JavaWeb之 Servlet(2万6千字详解)

目录 前言1. Servlet 简介2. Servlet 前世今生3. Servlet 执行流程4. Servlet 快速入门5. 两种配置 Servlet程序 URL的方式5.1 使用 注解来配置 Servlet程序 的 URL5.1.1 urlPattern 的配置规则精确匹配目录匹配:使用 * 符号代表任意路径扩展名匹配任意匹配 5.1.2 小…

【MATLAB】语音信号识别与处理:SG滤波算法去噪及谱相减算法呈现频谱

1 基本定义 SG 滤波算法(Savitzky - Golay 滤波算法)是一种数字信号处理算法,用于对信号进行平滑处理。该算法利用最小二乘法拟合局部数据段,然后用拟合的函数来估计每个数据点的值,从而实现平滑处理。 SG 滤波算法的…

redis05 sprngboot整合redis

redis的Java客户端 整合步骤 添加redis的pom依赖 <!-- 引入redis依赖 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency><!-- 引入redis连…

51单片机学习day02

基于普中的stc89c52&#xff0c; 串口&#xff1a; 通讯接口&#xff0c;51单片机自带UART&#xff08;通用异步收发器&#xff09;&#xff0c;可实现窗口通讯。 硬件电路&#xff1a; 简单双向串口通信有两根通信线&#xff08;发送端TXD和接收端RXD&#xff09;&#xff0…

HelixToolKit的模型旋转操作

前面加载了模型以后&#xff0c;鼠标拖动和缩放比较好操作&#xff1b;但是旋转似乎没有&#xff0c; 操作了一阵&#xff0c;也不是没有&#xff0c;应该是还不熟悉&#xff1b; 旋转的指示器在右下角&#xff0c;现在U面看到正面&#xff0c; 想看一下模型的背面&#xff0…

【Java项目介绍和界面搭建】拼图小游戏——添加图片

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

扼杀网络中的环路:STP、RSTP、MSTP

目录 前言&#xff1a; 一、STP&#xff08;Spanning Tree Protocol&#xff09; 1.1 STP功能 1.2 STP应用 二、RSTP&#xff08;Rapid Spanning Tree Protocol&#xff09; 2.1 RSTP功能 2.2 RSTP应用 三、MSTP&#xff08;Multiple Spanning Tree Protocol&#xff0…

Angular 由一个bug说起之四:jsonEditor使用不当造成的bug

一&#xff1a;问题 项目中使用了一个JSON第三方库&#xff1a; GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON 当用户编辑JSON格式的数据&#xff0c;查找替换时&#xff1a; 用户的期望结果是&#xff1a;$$ 被替换为$$_text&a…

[物联网] OneNet 多协议TCP透传

[物联网] OneNet 多协议TCP透传 STM32物联网–ONENET云平台的多协议接入产品创建 : https://blog.csdn.net/qq_44942724/article/details/134492924 Onenet tcp 透传 : https://blog.csdn.net/flyme2010/article/details/107086001 tcp服务端测试工具 : http://tcp.xnkiot.com/…

zephyr学习

zephyr内核对象学习 定时器 类似linux的定时器&#xff0c; 可以分别设置第一次到期时间和后续的周期触发时间&#xff0c; 可以注册到期回调和停止回调 还有一个计数状态&#xff0c;用于标记timer到期了多少次 duration&#xff1a;设定timer第一次到期的时间。 period: …

SpringBoot3.2.0整合MyBatis-plus的相关问题及处理方法

SpringBoot3.2.0整合MyBatis-plus的相关问题 文章目录 SpringBoot3.2.0整合MyBatis-plus的相关问题1. build.gradle2. mybatis-plus整合问题1. 错误描述2. 问题分析及解决1. 原因分析2. 解决方式 Springboot3.2.0 GA版发布于 2023-11-24 环境&#xff1a;SpringBoot3.2.0Gradle…

【蛀牙】日常生活如何正确护理牙齿?刷牙、洗牙、补牙

程序员生活指南之 【蛀牙】日常生活如何正确护理牙齿&#xff1f;刷牙、洗牙、补牙 文章目录 一、日常如何清洗牙齿&#xff1f;——刷牙与洗牙1、牙齿污垢1.1 牙菌斑1.2 软垢1.3 牙结石1.4 牙龈出血 2、如何刷牙2.1 关于时间2.2 各种工具2.3 巴氏刷牙法 二、定期进行洗牙3、如…

题目 1076: 内部收益率

题目描述: 在金融中&#xff0c;我们有时会用内部收益率IRR来评价项目的投资财务效益&#xff0c;它等于使得投资净现值NPV等于0的贴现率。换句话说&#xff0c;给定项目的期数T、初始现金流CF0和项目各期的现金流CF1, CF2, ...&#xff0c;CFT&#xff0c;IRR是下面方程的解&…

RISC-V特权架构 - 特权模式与指令

RV32/64 特权架构 - 特权模式与指令 1 特权模式2 特权指令2.1 mret&#xff08;从机器模式返回到先前的模式&#xff09;2.2 sret&#xff08;从监管模式返回到先前的模式&#xff09;2.3 wfi&#xff08;等待中断&#xff09;2.4 sfence.vma&#xff08;内存屏障&#xff09; …

SpringBoot+Vue+MySQL:装修管理新架构探索

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

FPGA开源项目分享——2D N-Body重力模拟器

​导语 今天继续康奈尔大学FPGA 课程ECE 5760的典型案例分享——2D N-Body重力模拟器。 &#xff08;更多其他案例请参考网站&#xff1a; Final Projects ECE 5760&#xff09; 1. 项目概述 项目网址 Grav Sim 项目说明 该项目的目标是创建一个用DE1-SOC进行硬件加速的2…

Java面试技巧

一、面试前准备 复习基础知识&#xff1a;深入理解Java核心概念&#xff0c;如JVM、JDK、JRE等。熟悉Java基本语法、面向对象编程、异常处理、集合类、IO流等。同时&#xff0c;对Java的新特性&#xff0c;如Lambda表达式、Stream API等也要有所了解。强化算法和数据结构&…

简易内存池2 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 请实现一个简易内存池,根据请求命令完成内存分配和释放。 内存池支持两种操作命令&#xff0c;REQUEST和RELEASE&#xff0c;其格式为: REQUEST请求的内存大小 …

Redis 【1】—— 安装 与 配置

Redis 【1】—— 安装 与 配置 一、安装 与 配置&#xff08;一&#xff09;使用 yum 安装&#xff08;二&#xff09;创建符号链接1. 软链接2. 相关指令 &#xff08;三&#xff09;修改配置文件&#xff08;四&#xff09;Redis 的启停 一、安装 与 配置 &#xff08;一&…