文档章节

浅谈Vue与其他框架的比较

王双肖
 王双肖
发布于 2017/07/06 20:30
字数 1893
阅读 660
收藏 0

作者前言:

    1、首先我是小白,写的不好的或者写错的,请指教,不要喷,就当呵护一个花朵一样去呵护我这个新来的女程序猿。谢谢!

    2、其次:我对Vue不是很透,文章中也可以看得出来,写这篇文章的本意是为了总结使用一个框架之后的感触,主要是给现在的自己一个总结性成果,还有给未来的自己看看,自己当初有多蠢(估计就是正在看的这个猿的心态)。谢谢!

    3、最后:不喜勿喷,默默关掉就好。谢谢!

    4、最后的最后:本文并不全,随时想到随时补充,也欢迎各个猿猿们私信补充。谢谢!

我要开始了,请做好准备:

1、css引入时:scoped

    在vue项目中,我们会发现引入css 的时候,需要添加 scoped 属性,这个属性会使得当前的样式只作用于当前的文件。

    原理是:我们会发现在添加scoped之后,vue其实在背后做的操作是使得你的css样式添加了一个类似于 [data-v-76b126]的唯一标识,这样每个vue文件对应一个唯一标示。

    优势:不同的页面即使相同的层级、相同的class或者id都不会互相影响。(这个坑已经和海哥趟过了,所以有了更深刻的教训。)

 

2、css使用  styl 的动态样式表

    使用vue的过程中,发现使用的不是平时开发用的 style后缀的文件,而是类似于less 的动态样式。

    优势:动态的样式表,层级更加精确、减少了几乎所有的层级冗余代码、可以设置样式变量这样会减少很多的样式不统一的错误,以及减少代码量等,这样大大加快了样式的开发速度。

 

3、router:路由配置更加简单

    vue在配置路由的时候更加的简单灵活。

    它同angluar一样,需要配置路由,但是在vue里面,只需要在路由配置文件里面定义好路由,就可以直接使用。包括可以在配置时传入参数进路由,vue会更简单方便,不用再同angular一样,配置路由需要多了页面同时编辑,而vue只需要在 config_router文件里面定义一次就可以直接使用。

    优势:在这种单页面应用或者页面比较多的情况下,配置路由简单灵活,会大大降低配置错误率和提高工作效率。

 

4、import、export:引入非常方便

    import进口:引入组件或者模板或者公用方法都非常的简单快捷,在这方面vue和anglar比较,improt方式相同,都是一样的简单快捷。

    exoprt出口:都是为将此公用的方法出口到最外层,所有的页面都可以直接引用,这种方式也很方便快捷;

    优势:export和import都是可以将代码降低耦合度,提取公用的方法,一次export,处处import引用。

    缺憾:但是这种方法我个人觉得不是很灵活,比如我只需要一个字段但是由于公用的方法是写好的,我需要去请求整个方法拿到很多不用的字段,这样会有点浪费。

 

5、vuex

    vuex:是vue的高级应用,但是我对于这一块理解还有限,但是官方文档给予他很高的评价:

    官方这样说:

        再次强调,我们通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们    想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显,这样你在阅读代    码的时候能更容易地解读应用内部的状态改变。此外,这样也让我们有机会去实现一些能记录    每次状态改变,保存状态快照的调试工具。有了它,我们甚至可以实现如时间穿梭般的调试体    验。

    我还没有理解:可以实现如时间穿梭般的调试体验。但是可以肯定的是,这是vue一个很大的优势所在

 

6、vuc-cli

    Vue.js 提供一个官方的命令行工具,可用于快速搭建大型单页应用。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

    优势:这样很快的搭建起脚手架,很容易上手,在搭建项目的时候无疑给开发人员节省了很大部分时间。

 

7、npm run dev

    npm run dev:热重载,在项目脚手架搭建完成之后,运行这个命令行,会开启代码做了修改之后,一旦ctrl+s,或者焦点离开IDE,就会局部刷新页面。

    但是美中不足的是,当动态的数据发生变化后,页面DOM是没有刷新的,只有手动刷新页面DOM数据才会发生变化。当然,在vue已经提供了强大的方便的前提下,这点小瑕疵是我完全可以接受的。

    优势:这样的热重载我非常喜欢,这样像我每做一个样式或者功能都强烈想看到效果的人,是节省了很大的等待时间的。

 

8、等同于reactNative的weex

    weex现在项目是用不到的,但是在以后Hybrid开发,如果选用vue框架,是很重要的一个技术。

    官方这样说:

React Native 能使你用相同的组件模型编写有本地渲染能力的 APP(iOS 和 Android)。能同时跨多平台开发,对开发者是非常棒的。相应地,Vue 和Veex会进行官方合作,Weex 是阿里的跨平台用户界面开发框架,Weex 的 JavaScript 框架运行时用的就是 Vue。这意味着在 Weex 的帮助下,你使用 Vue 语法开发的组件不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用。

 

9、严格模式

    vue在webpack.base.conf.js的perLoaders属性中,可以开启严格模式,并且是变态严格模式,比如说多或少空格了、单引号了、标点符号后面添加逗号了。。。非常之严格。

    这样有利有弊,利是:被强迫着按照最标准的标准来规范代码,这样形成的好的代码习惯对以后的代码生活是非常好的;弊是:在使用初期,会有很多错误出现,设置有很多因为标点符号或者空格而报错,这样在开发上效率会大大折扣,不过在习惯了之后会好很多。

    对于我来说,利是大于弊的,因为在短期内提升开发效率,更重要的是养成好的代码开发习惯,这样从长远来说,无疑是后者更为重要。

 

10、学习成本+大小+性能

     还有特别重要的一点就是很容易上手,学习成本相对angular2来说要低很多。

    一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~130kb) 还是要小的多

© 著作权归作者所有

上一篇: Vue学习之旅
王双肖
粉丝 2
博文 70
码字总数 31588
作品 0
朝阳
程序员
私信 提问
vue 3.0 css 框架之页面样式混乱问题

这是自己在开发过程中遇到的小坑,都知道每个vue文件中有对应的css样式, 但是vue框架中每个vue页面的style必须加上scoped属性,如下图所示,代表仅对当前页面生效,否则在运行项目时页面样式...

YunOu
2018/10/31
271
0
Vue.js 优雅地集成第三方 JavaScript

原文地址:Sliding In And Out Of Vue.js 原文作者:Kevin Ball 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:LucaslEliane 校对者:Mcskiller, SevenOutman Vue....

LucasTwilight
03/18
0
0
Vue 与Angular、React框架的对比,你会学哪个?

首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。 View通过Controller来和M...

阿K1225
2018/10/29
176
0
基于Element-UI的Vue管理后台搭建

最近需要新搭建一个前端项目,因此就参考@PanJiaChen的Github项目模板vue-admin-template做部分改动,搭建一套前端框架 推荐读一下 手摸手,带你用vue撸后台 系列 1. 使用vue-cli3快速创建模...

whuer凌晨
2018/09/19
0
0
浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法。 看来想让女...

开元中国2015
2018/12/10
32
0

没有更多内容

加载失败,请刷新页面

加载更多

调用约定

对于常见的指令集,在指令层面没有所谓的“函数”概念,只有“子程序”概念。子程序是存储在“主程序”之外的一段指令。子程序通过call指令调用,通过ret指令返回。子程序可以使用内存、堆栈...

tommwq
39分钟前
3
0
设计类题目

1. 订单 和 退货单之间有什么关系? 答:退货单是 用 用户提交退货 和 订单生成的 或者 订单和退货单都是一张单子,用一个状态标识 2. 在这种由源头单生成的流程中,第二张单子是怎样生成的?...

杨凯123
54分钟前
5
0
读写锁分离

java.util.concurrent.locks包定义了两个锁类, 我们已经讨论的ReentrantLock类和 ReentrantReadWriteLock 类。 如果很多线程从一个数据结构读取数据而很少线程修改其中数 据的话, 后者是十...

ytuan996
今天
6
0
金钱焦虑症测试 -- 人人都有吧?

你经常觉得钱不够花,被金钱困扰着吗?试试这个焦虑量表测试,测试一下你的金钱焦虑指数吧。请选择选一个最适合自己态度的答案。买买买的欲望高吗?又是一个节日,有打折活动;又被种草一个化...

蛤蟆丸子
今天
4
0
JAVA-LOCK之底层实现原理(源码分析)

首先和Synchronized(可以参考) 的不同之处,Lock完全用Java写成,在java这个层面是无关JVM实现的。其实现都依赖java.util.concurrent.AbstractQueuedSynchronizer类,简称AQS。 简单说来,...

小海bug
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部