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.hqwc.cn/news/671628.html

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

相关文章

【driver3】proc文件系统,内存分配,数据类型/移植/对齐,内核中断,通过IO内存访问外设,PCI

文章目录 1.创建proc文件系统接口:之前调试内核时都是通过prink打印内核信息,通过dmesg查看输出的信息。新调试方法:利用proc文件系统在pro文件夹下创建接口,读写这个接口就可实现对内核的调试2.内核内存分配函数:top&…

【arduino】库的安装方法

arduino 库的安装方法 假设你已经安装好 Arduino IDE 以 OneButton 为例来介绍几种安装方法 文章目录 arduino 库的安装方法方法一:直接安装法方法二:导入 .ZIP库方法三:将库文件夹直接复制到贡献库路径下方法四:将库文件夹直接…

【项目部署】手把手带你从零部署项目:宝塔 + uwsgi + Django + 腾讯云 + Websocket

1. 前言 哈喽,大家好,我是jiaoxingk。今天带来的是有关Django项目部署的教程。 当我们完成了一个项目作品之后,我们肯定会迫不及待的就准备上线部署啦, 这篇教程将带你从服务器的配置选购,再通过安装宝塔的形式进行项目…

【notes2】并发,IO,内存

文章目录 1.线程/协程/异步:并发对应硬件资源是cpu,线程是操作系统如何利用cpu资源的一种抽象2.并发:cpu,线程2.1 可见性:volatile2.2 原子性(读写原子):AtomicInteger/synchronized…

mac电脑如何安装python及环境搭建

(1)进入官网:Download Python | Python.org,根据自己电脑选择python (2)这里我选择的是mac,点击:macos,选择最近版本并点击进入 (3)选择mac版本: (4)点击就可以进入下载: (5)下载好之…

我独自升级崛起加速器推荐 用什么加速器好用 免费加速器推荐

新韩漫公司所发布的这项动作游戏已向玩家们敞开大门,为大家带来了前所未有的游戏体验和乐趣。这个游戏内包含了大量令人着迷的故事、令人印象深刻的战斗场景以及丰富多样的娱乐元素。在这其中最为引人注目的一点就是游戏内容中融入了“虚拟角色”的元素,…

大模型争霸的下一站:不仅是超越GPT-4,更是寻求模型之间的平衡应用

文 | 智能相对论 作者 | 沈浪 知名科学杂志《Nature》发表了一篇关于大模型规模参数大小争议的文章《In Al, is bigger always better?》——AI大模型,越大越好吗?随着大模型应用走向实践,这一问题不可避免地成为了当前AI行业发展的焦点与…

轻松上手的LangChain学习说明书

一、Langchain是什么? 如今各类AI模型层出不穷,百花齐放,大佬们开发的速度永远遥遥领先于学习者的学习速度。。为了解放生产力,不让应用层开发人员受限于各语言模型的生产部署中…LangChain横空出世界。 Langchain可以说是现阶段…

Chrome浏览器命令行妙用:使你的网上冲浪更加无障碍

引言 在当今数字化时代,网络浏览器已成为我们日常生活中不可或缺的工具之一。对于许多人来说,Google Chrome浏览器是首选,不仅因为它的普及度,更因为它提供的丰富功能和高度的可定制性。在Chrome的众多特性中,命令行功…

sqlalchemy 分表实现方案

1.需求及场景概述 现有系统中因历史数据量过大,产生了将历史数据进行按月存储的要求,系统和数据库交互使用的是sqlalchemy,假设系统的原来的历史记录表(record)如下: 为了将历史数据按月分表存储&#xff0…

Llama3-Tutorial之Llama3本地Web Demo部署

Llama3-Tutorial之Llama3本地 Web Demo部署 Llama3-Tutorial之Llama3本地Web Demo部署章节。 参考: https://github.com/SmartFlowAI/Llama3-Tutorial 1. 环境配置 conda create -n llama3 python3.10conda activate llama3conda install pytorch2.1.2 torchvision0…

经典的设计模式和Python示例(一)

目录 一、工厂模式(Factory Pattern) 二、单例模式(Singleton Pattern) 三、观察者模式(Observer Pattern) 一、工厂模式(Factory Pattern) 工厂模式(Factory Pattern…