首页 > 技术文章 > 概括下为什么要用vue开发

handsome0916 2020-12-28 11:03 原文

很多老程序员,习惯了使用原生html和js来开发前端页面,对于很多没用过vue的程序员来说,觉得没有必要。

下面,我来概括下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的不足:

当然,vue也有不足,不足的地方如下:

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

 

2、vue门槛较高,使用vue,需要先学习和摸索vue大概3天左右的时候,建议使用vue的时候,不需要看node.js自动帮你生成的js文件。你只需要编写你自己页面的代码就行了。具体nodejs帮你生成的框架代码,其实是不用看的。

 

推荐阅读