vue的理解

ops/2024/11/27 6:20:48/

什么是vue

vue是一套用于构建用户界面的渐进式框架,与其他框架不同的是,vue被设计为可以自底向上逐层应用,它也是创建单页面应用的web应用框架。vue的核心库只关注视图层,不仅易上手,还便于与第三方库或既有项目整合。当与现代化的工具链以及各种支持类库结合使用是,vue也能够为复杂的单页面应用提供驱动。

 

vue的核心特性

数据驱动(MVVM)

 

MVVM 表示的是 Model-View-ViewModel

 

model:模型层,负责处理业务逻辑以及和服务器端进行交互

 

view:视图层,负责将数据模型转化为UI展示出来

 

ViewModel:视图模型层,用来连接model和view,是model和view之间的通信桥梁

 

组件化

 

什么是组件化,就是把图形,非图形的各种逻辑抽象为一个统一的概念来实现开发的模式,在vue中每一个以.vue的文件都可以被视为一个组件;

 

组件化的好处

 

降低整个系统的耦合度,可以替换不同的组件快速完成需求

 

调试方便,由于整个系统是通过组件组合起来的,在出现为题的时候,可以快速定位到问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单的多

 

提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级

 

指令系统

 

指令是带有v-前缀的特殊属性,当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM

 

常用指令

 

条件渲染指令:v-if

 

列表渲染指令:v-for

 

属性绑定指令:v-bind

 

事件绑定指令:v-on

 

双向数据绑定:v-model

 

vue于传统开发的区别:

vue的所有界面事件,都是只去操作数据的;

 

vue的所有界面变动,都是根据数据自动绑定出来的

 

vue和react对比:

相同点:

 

都有组件化的思想

 

都支持服务器端渲染

 

都有虚拟dom

 

都是数据驱动视图

 

都有支持native的方案:vue的weex,react的react native

 

都有自己的构建工具:vue的vue-cli ,react的create react app

 

区别:

 

数据流向的不同:react从诞生开始就推崇单向数据流,而vue是双向数据流

 

数据变化的实现原理不同:react使用的是不可变数据,而vue使用的是可变数据

 

组件化通信的不同:react中我们使用的是回调函数来进行通信的,而vue中子组件向父组件传递消息有两种方式:事件和回调函数

 

diff算法不同:react主要使用diff队列保存需要更新哪些dom,得到patch树,再统一操作批量更新dom。vue使用双向指针,边对比,边更新dom


http://www.ppmy.cn/ops/137009.html

相关文章

Unity3D Lua如何支持面向对象详解

前言 Unity3D 是一款强大的跨平台游戏开发引擎,它支持使用多种编程语言进行开发,其中 Lua 是一种轻量级的脚本语言,适合用于游戏逻辑的编写。在 Unity3D 中,我们可以通过 Lua 来实现面向对象的编程,这样可以更方便地管…

网络安全期末复习

第1章 网络安全概括 (1)用户模式切换到系统配置模式(enable)。 (2)显示当前位置的设置信息,很方便了解系统设置(show running-config)。 (3)显…

skywalking es查询整理

索引介绍 sw_records-all 这个索引用于存储所有的采样记录,包括但不限于慢SQL查询、Agent分析得到的数据等。这些记录数据包括Traces、Logs、TopN采样语句和告警信息。它们被用于性能分析和故障排查,帮助开发者和运维团队理解服务的行为和性能特点。 …

刷题——字符串中的单词数(力扣)

文章目录 一、读题二、思路问题1:解决思路:分割方法:方法1、方法2、 三、代码实现:方法1、方法2、 一、读题 题目来源:https://leetcode.cn/problems/number-of-segments-in-a-string/description/ 首先看例子&#xf…

【数据结构实战篇】用C语言实现你的私有队列

🏝️专栏:【数据结构实战篇】 🌅主页:f狐o狸x 在前面的文章中我们用C语言实现了栈的数据结构,本期内容我们将实现队列的数据结构 一、队列的概念 队列:只允许在一端进行插入数据操作,在另一端…

我谈离散傅里叶变换的补零

有限序列的零延拓——零延拓不会改变离散傅里叶变换的形状的续篇。 L点序列可以做N点傅里叶变换,当 L ⩽ N L\leqslant N L⩽N时不会产生混叠。这部分内容在Rafael Gonzalez和Richard Woods所著的《数字图像处理》完全没有提到。 补零是序列末尾补零,不…

簡單易懂:如何在Windows系統中修改IP地址?

無論是為了連接到一個新的網路,還是為了解決網路連接問題,修改IP地址都是一個常見的操作。本文將詳細介紹如何在Windows系統中修改IP地址,包括靜態IP地址的設置和動態IP地址的獲取。 IP地址是什麼? IP地址是互聯網協議地址的簡稱…

nodejs第三方库sharp对图片的操作生成新图片、压缩、添加文字水印及图片水印等

Sharp是一个基于libvips的高性能Node.js图像处理库,它提供了广泛的功能,包括调整大小、裁剪、旋转、格式转换等。Sharp可以处理多种图像格式,并且能够高效地转换图像格式。 相关说明及用法看:https://sharp.nodejs.cn/ 安装&#…