前端框架Vue入门

Posted 2020-09-09 星光笔

1.Vue简介

Vue是一套构建用户界面的渐进性框架。Vue采用自底向上增量开发的设计，其关注点在图层，与angular的区别就在这里，它关注的是图层，而angular注释的是数据。

2.与React的区别：

2.1相同点

• 使用Virtual DOM（虚拟dom）
• 提供响应式（Reactive） 和组件化（Composable）的视图组件
• 都将核心放在保持核心库上，有配套的路由和负责处理全局状态管理的库

2.2不同点：

• 性能方面：React和Vue都是 Virtual Dom,但是渲染性能方面Vue优于React（Vue的Virtual  Dom 使用了复刻自snabbdom）
• 更新性能：React是以该组件为根，重新渲染整个组件子树，如果避免不必要的子组件的重渲染，需要在所有的地方实现shouldComponentUpdate检测并使用不可变得数据结构。而Vue组件的依赖就是在渲染过程中自动追踪的，不需要这样去做
• 开发中：Vue每秒中最高处理10帧，而React每秒最高处理不到1帧
• html & CSS:React中所有组件的渲染都是依靠JSX————XML语法编写，不过目前不太流行了，其优势在于：使用javascript功能来构建视图页面；而Vue提供模板和JSX，其优势在于：模板文件可以重复利用，并且CSS3的使用可以涉及更少的功能实现，可读性强，对于JavaScript要求低一些；CSS组件作用域：React需要把组件分布多个文件，而Vue可以每个单文件组件中完全访问CSS。
• 向上扩展：React的路由库和状态管理交给了社区维护，创建了一个更分散的生态系统；而Vue是官方维护和同步更新的，因此Vue没有React繁荣，但是Vue提供了Vue-cli脚手架（包含Webpack,Browserify,no build system）
• 向下扩展：React使用前提：JSX和ES2015；而Vue起步阶段不需要JSX和ES2015，起步简单
• 本地渲染：ReactNative能使你用相同的组件模型编写有本地渲染能力的APP，可以实现同时跨多平台开发。可以减少开发成本！

3.Vue快速起步

• node安装后，打开命令窗口：npm install vue

• npm  install --global vue-cli

• vue init webpack my-project //my-project是你的项目名这里需要你注意项目名不予许大写，项目描述，作者，Vue build，vue-router ESLint（ES6）而我选择了全都是，你如果不熟悉ES6可以选择否，Karma +Mocha 测试框架：请看这个Mocha
• npm install
• npm run dev

最好运行效果如上图

本文参考博文：http://vuejs.org/guide/index.html