浅谈Vue与其他框架的比较

作者前言：

    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) 还是要小的多

转载于:https://my.oschina.net/wsxiao/blog/1189212