• 技术文章 >web前端 >前端问答

    vue的优缺点是什么?为什么使用它?

    青灯夜游青灯夜游2023-01-17 17:20:56原创63

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

    本教程操作环境:windows7系统、vue3版,DELL G3电脑。

    什么是 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>

    结果展示

    1.gif

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

    Vue.js的优缺点

    优点:

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

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

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

    4. 紧凑:~18kb min+gzip,且无依赖。

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

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

    缺点:

    为什么要用 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.js视频教程

    以上就是vue的优缺点是什么?为什么使用它?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue
    上一篇:html/css中的tt是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 图文详解Vue3实现全局搜索框步骤(附代码)• 在命令行执行命令什么表示初始化vue项目• vue3改了几个生命周期函数• vue插槽解决什么问题• 浅析vue中怎么刷新当前页面• Vue中什么是JSX?什么时候用?怎么用?
    1/1

    PHP中文网