当前位置: 首页 > article >正文

vue的理解

什么是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.kler.cn/a/411336.html

相关文章:

  • 【Python】九大经典排序算法:从入门到精通的详解(冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序、计数排序、基数排序、桶排序)
  • 基于springboot的县市级土地使用监控系统的设计与实现
  • Spring Boot——统一功能处理
  • 视频推拉流EasyDSS互联网直播点播平台技术特点及应用场景剖析
  • 【人工智能】PyTorch、TensorFlow 和 Keras 全面解析与对比:深度学习框架的终极指南
  • 树莓派2装FreeBSD14.1 Raspberry Pi2 install FreeBSD14.1 00000121:error:0A000086:SSL
  • 鸿蒙学习自由流转与分布式运行环境-价值与架构定义(1)
  • 【C++】顺序容器(二):顺序容器操作
  • C++11新特性探索:Lambda表达式与函数包装器的实用指南
  • 极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【四】
  • STM32中I2C总线中,允许从机控制SCL总线吗?
  • uname -m(machine) 命令用于显示当前系统的机器硬件架构(Unix Name)
  • 什么是 C++ 中的多继承?它有哪些优缺点?什么是虚继承?为什么要使用虚继承?
  • OSPTrack:一个包含多个生态系统中软件包执行时生成的静态和动态特征的标记数据集,用于识别开源软件中的恶意行为。
  • Linux 网络编程之UDP套接字
  • win10中使用ffmpeg的filter滤镜
  • gocv调用opencv添加中文乱码的解决方案
  • 《Java 对象池技术:性能优化的利器》
  • 堆——acwing
  • shell脚本实现自动化交互功能
  • java大视频分片上传
  • 【Conda 】Conda 配置文件详解:优化你的包管理与环境设置
  • 【Nginx】核心概念与安装配置解释
  • Docker login 报证书存储错误的解决办法
  • (完整版Word原件)智慧产业园区能源管控系统解决方案,能源管理系统解决方案-能源数字化监控解决方案,工业能源管理系统解决方案,园区能源管理
  • 探索Python网页解析新纪元:requests-html库揭秘