【Vue】Vue的简介和特性

最新推荐文章于 2023-12-28 12:05:17 发布

早睡早起长头发

最新推荐文章于 2023-12-28 12:05:17 发布

阅读量2.5k

点赞数 2

分类专栏： Vue 文章标签： vue.js vue 前端框架前端

本文链接：https://blog.youkuaiyun.com/weixin_51481135/article/details/128815038

版权

Vue 专栏收录该内容

25 篇文章

订阅专栏

一、Vue简介

Vue.js可以说是MVVM架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式前端框架。专注于MVVM中的ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API简洁。

1. 构建用户界面

前端开发者最主要的工作，就是为网站的使用者（又称为:网站的用户）构建出美观、舒适、好用的网页。

1.1 构建用户界面的传统方式

在传统的 Web 前端开发中，是基于 jQuery + 模板引擎的方式来构建用户界面的。

1.2 使用 vue 构建用户界面

使用 vue 构建用户界面，解决了 jQuery + 模板引擎的诸多痛点，极大的提高了前端开发的效率和体验。

2. 渐进式

渐进式代表的含义是：Vue被设计成可以自底向上逐层应用；可以整合第三方的库；主张最少。

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

3. 框架

框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能。

官方给 vue 的定位是前端框架，因为它提供了构建用户界面的一整套解决方案（俗称 vue 全家桶）：

vue（核心库）

vue-router（路由方案）

vuex（状态管理方案）

vue 组件库（快速搭建页面 UI 效果的方案）

以及辅助 vue 项目开发的一系列工具：

vue-cli（npm 全局包：一键生成工程化的 vue 项目 - 基于 webpack、大而全）

vite（npm 全局包：一键生成工程化的 vue 项目 - 小而巧）

vue-devtools（浏览器插件：辅助调试的工具）

vetur（vscode 插件：提供语法高亮和智能提示）

要学习 vue，就是在学习 vue 框架中规定的用法，如vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库。

4. 双向数据绑定

vue.js 会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。这也是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。

二、Vue的特点

1. 轻量级

Angular的学习成本高，使用起来比较复杂，而Vue相对简单、直接，所以Vue使用起来更加友好。

2. 组件化

Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件(component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑)，然后整个应用就算做完了。

3. 指令

指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。指令提供了一些特殊的特性，将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind动态绑定指令、v-if 条件渲染指令、v- for列表渲染指令等。

4. 插件

插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。常用的扩展插件有vue-router、Vuex 等。

三、Vue的特性

vue 框架的特性，主要体现在如下两方面：

- 数据驱动视图

数据：渲染页面期间需要用到的数据——API接口返回的数据或程序用写死的假数据

视图：最终渲染出来的页面的DOM结构。

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。即数据的变化会驱动视图自动更新。示意图如下：

好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来。

注意：数据驱动视图是单向的数据绑定，即数据的变化导致页面更新。

2. 双向数据绑定

在网页中，form 表单负责采集数据，Ajax 负责提交数据。

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。示意图如下：

双向：

js 数据的变化，会被自动渲染到页面上

页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值

注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例），具体MVVM概念请观看以下博客：【软件架构模式】MVVM模式和MVC模式区别_早睡早起长头发的博客-优快云博客_mvvc模式

四、Vue与React的区别

Vue很多特性与Angular和React有着相同的地方，但是也有着性能方面的差别。

Vue使用基于依赖追踪的观察系统并且使用异步队列更新，所有的数据都是独立触发的，提高了数据处理能力。

React和Vue的中心思想是一切都是组件，组件之间可以实现嵌套。React 采用了特殊的JSX语法，Vue中也推崇编写以*.vue后缀命名的文件格式，对文件内容都有一些规定，两者需要编译后使用。

值得一提的是，React依赖虚拟DOM，而Vue使用的是DOM模板。Vue 在模板中提供了指令、过滤器等，可以非常方便和快捷地操作DOM。推荐将Vue 使用到具有复杂交互逻辑的前端应用中，以确保用户的体验效果。