vue的优缺点有哪些

本文小编为大家详细介绍“vue的优缺点有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue的优缺点有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

优缺点是：简单、快速、强大、对模块友好；但不支持IE8，且对于搜索引擎不友好，会影响seo。使用原因：Vue是一款能降低开发成本、提升开发效率的工具，它能帮助开发者从繁琐的DOM操作中解脱出来；开发中设定好正确视图和数据的规则后，只需要关注数据的变化，视图内容是会随之变化的，不需手动再操作DOM元素进行修改。且Vue的组件化对于提升代码复用、拆解大型项目，都有着很好的帮助。

什么是 Vue？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

下面是一个最基本的示例：

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

结果展示

上面的示例展示了 Vue 的两个核心功能：

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

Vue.js的优缺点

优点：

1. 简单：官方文档很清晰，比 Angular 简单易学。

2. 快速：异步批处理方式更新 DOM。

3. 组合：用解耦的、可复用的组件组合你的应用程序。

4. 紧凑：~18kb min+gzip，且无依赖。

5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。

6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

• 不支持IE8。

  Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

• vue是单页面页面，对于搜索引擎不友好，影响seo.因此不适合做公司官网。比如两个vue路由（页面），它的路径是这样的：index.html#aaa  和 index.html#bbb，但对于搜索引擎来说，都是同一个页面，就是index.html。这样搜索引擎就无法收录你的页面。

为什么要用 Vue.js

使用任何新框架和库其实都是为了解决我们当前开发所遇到的问题，或者能提升其开发效率。每个人的成本就是时间，好的工具则能够帮助我们节约时间，从项目角度而言，也就帮我们节约了成本。而 Vue.js 就是一款能降低开发成本、提升开发效率的工具，它能帮助我们从繁琐的 DOM 操作中解脱出来。开发中，我们设定好正确视图和数据的规则后，只需要关注数据的变化，视图上的内容是会随之变化的，而不需要我们手动再操作 DOM 元素进行修改。

此外，前端开发的模式也逐渐开始往组件化方向转变，Web Components 的概念也开始逐渐成为标准，拥有自己独立的 HTML 片段、JS 文件以及 CSS 样式，这样在使用时可以不用担心对自己本身业务上的代码造成影响。Vue.js 对这一概念也进行了自己的实现，这样对于提升代码复用、拆解大型项目，都有着很好的帮助。

vue的一些好处：

1、控件自动跟数据绑定，提交表单到后台的时候，可以直接使用data里面的数据值，而不需要再使用$("#id")那一套方法来获取控件的值，对控件赋值也方便很多，只需要改变data的值，控件就会自动改变值。将复杂的界面操作，转化为对数据进行操作。

比如下面的一段代码就可以实现了select控件的里面的列表的动态管理：

html代码：

<el-select v-model="mType" style="flex: 1;">
　　<el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>

js代码：

data(){
    return{
　　　　mType:'',
　　　　enums:[{value:0,label:'未婚'},{value:1,label:'已婚'}]
　　}
}

当你需要修改select列表的内容的时候，不再需要对dom进行操作，只需要简单的改变enums的值。当控件选择的值发生改变，会自动绑定到data的 mType 字段。

2、页面传值和状态管理

vue的页面传值可供选择的方法非常多，比如使用子组件属性传值，比如使用页面url参数的方法传值，或使用vuex全局状态管理的方法页面传值等等。而原生开发的时候，在页面有多个参数的时候，页面传值和初始化，要复杂很多。而vue，直接将参数保存在对象里面，直接给子组件的属性或vuex存储一个对象就行了。

3、模块化开发、模块化更新

就像第二点所说的，其实可以引申到模块化开发。比如一个列表页面里面有添加功能，有修改功能，这时候我们可以通过引用子组件的形式，当子组件内容更新的时候，修改主组件的数据，比如修改了一条数据后，我们需要列表页同时刷新，但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个，需要写很多业务逻辑保存上一个页面的搜索条件和页码这些参数，但假如你用vue开发，将变得非常简单。

4、代码可读性

vue天生具有组件化开发的能力，因此不同的功能基本都是写在不同的模块里面，因此代码的可读性非常高。当一个新手接手一个旧项目的时候，基本上可以做到一到两天就能定位到要修改的代码，进行修改。

5、基于强大的nodejs，添加新的组件库，基本一句npm命令就能安装，比如当我需要使用axios组件的时候，直接npm install axios安装一下，就可以使用axios这个组件。熟悉maven的同学估计很容易就能理解npm工具。

6、主路由、子路由、主页面、子组件的方式，可以让我们彻底抛弃iframe。写过前端的同学都知道，因为iframe的滚动条、和子页面跟其他页面的交互性这些原因、用户体验还是远远没有单页面架构友好。而且使用vue非常简单方便的实现系统菜单、导航等固定布局。

7、css模块化：各个组件之间，可以使用相同的样式名，但有不同的样式属性。比如组件A和组件B的button都绑定了class="btn", 但在两个组件里，我们可以实现两个不同的btn样式属性，互不影响。

读到这里，这篇“vue的优缺点有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注蜗牛博客行业资讯频道。