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

相关推荐
麦麦大数据23 分钟前
F029 vue游戏推荐大数据可视化系统vue+flask+mysql|steam游戏平台可视化
vue.js·游戏·信息可视化·flask·推荐算法·游戏推荐
paopaokaka_luck1 小时前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风2 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Southern Wind2 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树3 小时前
Vue3优化指南:少写代码,多提性能
vue.js
90后的晨仔3 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
90后的晨仔3 小时前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
重生之我要当java大帝3 小时前
java微服务-尚医通-数据字典-5
vue.js·微服务·云原生·架构
Shi_haoliu4 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥4 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计