Vue MVVM这一篇就够啦!

 Vue vs React

相似之处:

  • 它们都有使用 Virtual DOM虚拟DOM-CSDN博客;提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统
  • 都有支持native的方案,React的RN,vue的Wee下
  • 都支持SSR服务端渲染
  • 都支持props进行父子组件间的通信
  • 性能方面:React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

不同之处就是:

  • 数据绑定方面,vue实现了数据的双向数据绑定,react数据流动是单向
  • virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
  • state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理(如果要操作直接this.xxx)
  • 组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件

vue核心特点

响应的数据绑定

 可组合的视图组件

虚拟DOM

运行的js速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM节点,这样就造成了很大程度上的资源浪费。

利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM

当数据发生变化时,能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上

MVVM模式(双向数据绑定)

是什么?

  • Model层 通过ajax等api完成服务端到客户端model的同步,
  • View层 动态视图模板,展示的是VM的数据和状态,不处理状态,做的只是数据绑定的声明、指令的声明、事件绑定的声明
  • VM层 把View需要的层数据暴露,对View层的数据绑定声明、指令声明、事件绑定声明负责,处理View层声明的业务逻辑。绑定属性监听,当VM数据变化,V会得到更新;当V中声明了数据的双向绑定,(通常表单元素),框架就会监听V表单值的变化,一旦变化了VM中的数据也会自动更新

7d1549e07ddf4608b38856dd88d0c16f.png

83295adf8bed4f5594ae69773e9669a1.png

750041ae3a93488ba0d9229e5092cbfe.png

 实现所需必要操作

  • 视图引擎,帮助developer操作DOM
  • 数据存储器,通过Object.defineProperty()自行封装存取数据的方式。往往封装的是发布 / 订阅模式,来完成数据的监听、数据变更时更新的通知。【数据代理与劫持】
  • 组件机制,因为有涉及继承、生命周期、组件通信机制,所以MVVM都有提供

Vue的双向绑定原理——数据劫持+(订阅者/发布者)模式_vue订阅者模式原理-CSDN博客

be6458dffb7e47e0a3d0c3f0e1506dba.png

核心Core

响应式
  • 数据响应式:数据模型仅仅是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新避免了繁琐的 DOM 操作提高开发效率【渲染引擎
  • 双向绑定:数据改变,视图改变;视图改变,数据也随之改变
  • 数据驱动:开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图

数据代理:通过一个对象代理对另一个对象中属性的操作

//number与age绑定
let number=18;
let person={name:'jing',age:'22'}
Object.defineProperty(’person‘,’age‘,{value:18,enumable:true,//默认false,遍历时是否参与遍历【枚举】writtable:true ,configurable:true,//控制属性是否可以删除       ,//getterget(){return number;}//setterset(value){number=value; }
})

6eaeeaf5814141cc82bf30ad55c20d79.png

2.x的响应式(Object.defineProperty())

 基本原理:通过object.defineProperty()把data对象中所有属性添加到vm上.为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作(读/写))data中对应的属性。

39a313c35c8a404e98277949e1ba96b2.png

let data={name:'atguigu'}
const vm =new Vue({el:"#root",data
})
vm.name=vm._data.name=options.data
data变了用到data的视图改变
3.x的响应式(proxy)

ES6 之 Proxy 介绍_proxy es6-CSDN博客

Vue3 中的代理原理详解_vue3 代理-CSDN博客

Proxy - JavaScript | MDN

Vue3中Proxy VS Vue2 Object.defineProperty()

  • 代理机制可以拦截多种类型的操作,包括属性查找、赋值、枚举、函数调用等,而 Object.defineProperty() 机制只能拦截属性赋值和查找操作。
  • 代理机制可以直接监测对象的属性,而 Object.defineProperty() 机制需要遍历对象的所有属性,并为每个属性添加 getter 和 setter,这在对象属性较多时会影响性能。
  • 代理机制可以监测到对象新增和删除的属性,而 Object.defineProperty() 机制无法监测到这些操作。

Proxy对象

能够为另一个对象创建代理,该代理可以拦截和重新定义该对象的基本操作,创建一个可以用来代替原始对象的对象,但是它可能会重新定义基本的object操作,如获取、设置和定义属性。代理对象通常用于记录属性访问、验证、格式化或清理输入等等。Proxy还常常和Reflect(方法皆为静态方法)同时使用

var p = new Proxy(target, handler);

Handler操作包括:

  • get:拦截对象属性的读取操作。
  • set:拦截对象属性的赋值操作。
  • deleteProperty:拦截对象属性的删除操作。
  • has:拦截 in 操作符的判断操作。
  • ownKeys:拦截 Object.keys()、Object.getOwnPropertyNames() 等操作。
  • apply:拦截函数的调用操作。
  • construct:拦截 new 操作符的调用操作。

基本使用

 // 创建一个处理程序对象const handler = {// 拦截目标对象的属性读取操作get(target, prop, receiver) {console.log(`访问了${prop}属性`);// 使用Reflect.get执行目标对象的属性读取操作return Reflect.get(target, prop, receiver);},// 拦截目标对象的属性设置操作set(target, prop, value, receiver) {console.log(`设置了${prop}属性`);// 使用Reflect.set执行目标对象的属性设置操作return Reflect.set(target, prop, value, receiver);},};// 创建一个目标对象const target = {name: "Alice",age: 20,};// 创建一个代理对象const proxy = new Proxy(target, handler);// 使用代理对象执行各种操作console.log(proxy.name); // 访问了name属性,输出Aliceproxy.age = 21; // 设置了age属性console.log(proxy.age); // 访问了age属性,输出21

通过代理对象修改原对象

const target = {};
const p = new Proxy(target, {});p.a = 37; // Operation forwarded to the targetconsole.log(target.a); // 37 (The operation has been properly forwarded!)

访问原对象私有属性

class Secret {#secret;constructor(secret) {this.#secret = secret;}get secret() {return this.#secret.replace(/\d+/, "[REDACTED]");}
}const aSecret = new Secret("123456");
console.log(aSecret.secret); // [REDACTED]
// Looks like a no-op forwarding...
const proxy = new Proxy(aSecret, {});
console.log(proxy.secret); // TypeError: Cannot read private member #secret from an object whose class did not declare it

This is because when the proxy's get trap is invoked, the this value is the proxy instead of the original secret, so #secret is not accessible.

const proxy = new Proxy(aSecret, {get(target, prop, receiver) {// By default, it looks like Reflect.get(target, prop, receiver)// which has a different value of `this`return target[prop];},
});
console.log(proxy.secret);
数据劫持

数据劫持是指在访问或修改对象的属性时,对这些操作进行拦截和监视,以便在属性发生变化时能够触发相关的操作。在 Vue 中,数据劫持用于监听数据的变化,以实现双向绑定和响应式更新。

组件渲染时若{{}}、v-bind、v-model等指令绑定数据时,此组件将加入该属性的订阅者(依赖)集合中【getter中实现】,当事件改变数据时将触发【setter】setter中将循环通知订阅者们(组件),并触发组件update()方法更新视图。

https://www.cnblogs.com/ceceliahappycoding/p/10604209.html

发布订阅者模式
观察者模式

2bfbd35746c74014b7fc9e38a639c4f5.png

设计模式—观察者模式与发布订阅-CSDN博客
Vue响应式原理

6e215608016b4d16bfa1aeefde802a90.png

 声明式渲染

它允许开发者通过简洁的声明来定义用户界面的结构和内容,而不必直接操作DOM。这种方式使得应用的开发更加直观和易于维护。

  • 插值:使用双大括号`{{ }}`将数据绑定到模板中,使数据变化能够自动更新到视图。
  • v-bind指令:用于动态地绑定元素的属性,使元素的属性值随数据的变化而变化。
  • 列表渲染:使用`v-for`指令来声明式地渲染列表,循环遍历数组或对象,并为每个项目渲染相应的元素。
  • 条件渲染:使用`v-if`和`v-else`指令根据特定条件来渲染元素,使应用能够根据条件显示或隐藏元素。
  • 事件监听:使用`v-on`指令声明式地监听DOM事件,并在事件发生时执行特定的方

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

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

相关文章

GreptimeDB 助力国家电网数字换流站打造稳定高效的时序数据底座

电网体系作为现代社会运行的支柱之一,为各行各业、千家万户提供了电能的基本支持。从家庭到企业,医院到学校,交通到通讯,电力电网的应用贯穿始终。近年来,特高压换流站成为国家电网的重点建设工程,“十四五…

vivado Virtex 和 Kintex UltraScale+ 比特流设置

下表所示 Virtex 和 Kintex UltraScale 器件的器件配置设置可搭配 set_property <Setting> <Value> [current_design] Vivado 工具 Tcl 命令一起使用。

RAG 修炼手册|一文讲透 RAG 背后的技术

今天我们继续剖析 RAG&#xff0c;将为大家详细介绍 RAG 背后的例如 Embedding、Transformer、BERT、LLM 等技术的发展历程和基本原理&#xff0c;以及它们是如何应用的。 01. 什么是 Embedding? Embedding 是将离散的非结构化数据转换为连续的向量表示的技术。 在自然语言…

管理能力学习笔记九:授权的常见误区和如何有效授权

授权的常见误区 误区一&#xff1a;随意授权 管理者在授权工作时&#xff0c;需要依据下属的能力、经验、意愿问最自己&#xff1a;这项工作适合授权给Ta做吗&#xff1f;如果没有&#xff0c;可以通过哪些方法进行培训呢&#xff1f; 误区二&#xff1a;缺乏信任 心理暗示…

牛客NC275 和为S的两个数字【简单 map C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/390da4f7a00f44bea7c2f3d19491311b 思路 map参考答案C #include <vector> class Solution {public:vector<int> FindNumbersWithSum(vector<int> array, int sum) {vector<int> ans;m…

【iOS】NSOperation、NSOperationQueue

文章目录 前言一、NSOperation、NSOperationQueue 简介二、NSOperation、NSOperationQueue 操作和操作队列三、NSOperation四、NSOperationQueue五、NSOperationQueue 控制串行执行、并发执行六、 NSOperation 操作依赖七、NSOperation 优先级八、NSOperation、NSOperationQueu…

一个JDBC小工具

pom.xml 结构 <properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><mysql5>5.1.44<…

服务器端优化-Redis内存划分和内存配置

6、服务器端优化-Redis内存划分和内存配置 当Redis内存不足时&#xff0c;可能导致Key频繁被删除、响应时间变长、QPS不稳定等问题。当内存使用率达到90%以上时就需要我们警惕&#xff0c;并快速定位到内存占用的原因。 有关碎片问题分析 Redis底层分配并不是这个key有多大&…

[信息收集]-端口扫描--Nmap

端口号 端口号的概念属于计算机网络的传输层&#xff0c;标识这些不同的应用程序和服务而存在的。通过使用不同的端口号&#xff0c;传输层可以将接收到的数据包准确地传递给目标应用程序。 80&#xff1a;HTTP&#xff08;超文本传输协议&#xff09;用于Web浏览器访问网页 …

jvm面试题30问

什么是JVM的跨平台&#xff1f; 什么是JVM的语言无关性&#xff1f; 什么是JVM的解释执行 什么是JIT? JIT&#xff1a;在Java编程语言和环境中&#xff0c;即时编译器&#xff08;JIT compiler&#xff0c;just-in-time compiler&#xff09;是一个把Java的字节码&#xff08;…

Fireworks AI和MongoDB:依托您的数据,借助优质模型,助力您开发高速AI应用

我们欣然宣布 MongoDB与 Fireworks AI 正携手合作 让客户能够利用生成式人工智能 (AI) 更快速、更高效、更安全地开展创新活动 Fireworks AI由 Meta旗下 PyTorch团队的行业资深人士于 2022 年底创立&#xff0c;他们在团队中主要负责优化性能、提升开发者体验以及大规模运…

Ubuntu22.04有线网络连接但是没网,网络图标显示问号

Ubuntu22.04有线网络连接但是没网&#xff0c;网络图标显示问号 问题描述解决方案 问题描述 有线网络连接 但是没网 且网络图标显示问号 解决方案 进入设置->隐私->在 连接情况 中关闭连接检查 关闭后 网络正常

vue 时间轴页面 自己的写法 欢迎交流指正

<div class"first-box"><!--贯穿线--><div class"vertical-line-wrap"><div class"vertical-line"></div><div class"vertical-line-arrow"></div></div><!--开始--><div c…

用于图生成的自回归扩散模型 笔记

1 Title Autoregressive Diffusion Model for Graph Generation&#xff08;Lingkai Kong、Jiaming Cui、Haotian Sun、Yuchen Zhuang、B. Aditya Prakash、Chao Zhang&#xff09;【PMLR 2022】 2 Conclusion This study propose an autoregressive diffusion model …

iOS ------ JSONModel源码

一&#xff0c;JSONModel的基本使用 1&#xff0c;基本使用方法 - (instancetype)initWithDictionary:(NSDictionary *)dict error:(NSError **)err; - (instancetype)initWithData:(NSData *)data error:(NSError **)error; - (instancetype)initWithString:(NSString *)str…

Python深度学习基于Tensorflow(3)Tensorflow 构建模型

文章目录 数据导入和数据可视化数据集制作以及预处理模型结构低阶 API 构建模型中阶 API 构建模型高阶 API 构建模型保存和导入模型 这里以实际项目CIFAR-10为例&#xff0c;分别使用低阶&#xff0c;中阶&#xff0c;高阶 API 搭建模型。 这里以CIFAR-10为数据集&#xff0c;C…

9.4.k8s的控制器资源(job控制器,cronjob控制器)

目录 一、job控制器 二、cronjob控制器 一、job控制器 job控制器就是一次性任务的pod控制器&#xff0c;pod完成作业后不会重启&#xff0c;其重启策略是&#xff1a;Never&#xff1b; 简单案例 启动一个pod&#xff0c;执行完成一个事件&#xff0c;然后pod关闭&#xff1b;…

初识指针(2)<C语言>

前言 前文介绍完了一些指针基本概念&#xff0c;下面介绍一下&#xff0c;const关键字、指针的运算、野指针的成因以及避免&#xff0c;assert函数等。 目录 const&#xff08;常属性&#xff09; 变量的常属性 指针的常属性 指针的运算 ①指针 -整数 ②指针-指针 ③指针与…

【Osek网络管理测试】[TG3_TC6]等待总线睡眠状态_2

&#x1f64b;‍♂️ 【Osek网络管理测试】系列&#x1f481;‍♂️点击跳转 文章目录 1.环境搭建2.测试目的3.测试步骤4.预期结果5.测试结果 1.环境搭建 硬件&#xff1a;VN1630 软件&#xff1a;CANoe 2.测试目的 验证DUT在满足进入等待睡眠状态的条件时是否进入该状态 …

17 内核开发-内核内部内联汇编学习

​ 17 内核开发-内核内部内联汇编学习 课程简介&#xff1a; Linux内核开发入门是一门旨在帮助学习者从最基本的知识开始学习Linux内核开发的入门课程。该课程旨在为对Linux内核开发感兴趣的初学者提供一个扎实的基础&#xff0c;让他们能够理解和参与到Linux内核的开发过程中…