vue进阶——vue简介

vue起源

​ Vue的作者是留美中国学生尤玉溪，Vue起源于2013到2014年，这仅仅是Vue的起源。在Vue不断的发展过程中被开发者普遍认可的大概在2016年，直到今天Vue的发展较为健康，Vue3.0正式版本很快也将发布。Vue的健康发展离不开起框架本身的特点。但是不可否认Vue的一些思想是借鉴于angular和react的，随着Vue的发展，可以看到Vue更多的思想是借鉴了react。

一、vue的特点

• 低门槛和渐进式： 比较容易开发者上手开发，从简单不断扩充到复杂的应用。
• 轻量级： Vue2.0版本代码压缩据说只要17kb大小。
• 命名式： 当你想要做什么的时候，通过指令，返回想要的结果，可以不用动脑子的操作。区别于react是声明式。
• 组件化： 单文件组件，解耦，易开发维护。
• 高效率和虚拟DOM(virtual DOM)： Vue将真实的DOM数据以对象的形式抽离出来。数据修改，再将VNode以特定的渲染机制渲染成真实的DOM。
• 响应式： Vue2x版本采用object.defineproperty数据劫持。3.0版本修改为proxy代理。
• SPA单页面： Vue拥有一个Root组件，所有页面展示都围绕这个Root Compontent展示。
• MVVM： 由前端架构MVC发展而来，M(数据层)-V(视图层)-VM(数据和视图的联系)，数据变化，通过ViewModel触发视图变化，不再是MVC里面的单向变化，MVVM数据和视图是双向变化（所谓响应式）。

二、vue全家桶技术

1. vue-cli：搭建vue项目的脚手架，官方定义为Vue.js 开发的标准工具！

2. vue-router：Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

3. vuex：一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

4. vue-loader：基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取。

5. axios：一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

6. 框架如：iview、vant、elementUI…

三、与其他框架对比

1. React

   • 相同点：
     • 使用Virtual DOM；
     • 提供了响应式（Reactive）和组件化（Composable）的视图组件；
     • 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
   • 不同点：
     • 在React中，所有的组件渲染功能都依靠JSX。JSX是使用XML语法编写的JavaScript的一种语法糖。而vue组件使用的是template；
     • Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。
     • vue 提供了 CLI 脚手架，能让你通过交互式的脚手架引导非常容易地构建项目。你甚至可以使用它快速开发组件的原型。React 在这方面也提供了 create-react-app，但是现在还存在一些局限性；

2. AngularJS

   • 相同点：
     • 数据绑定：vue和angular绑定都可以用{{}}；
     • 都支持内置指令和自定义指令；
     • 都支持内置过滤器和自定义过滤器。
   • 不同点：
     • angular：依赖对数据做脏检测，所以watcher越来越多。vue：使用基于依赖追踪的观察，并且使用异步队列更新，所有的数据都是独立触发的。
     • vue相当于angular要变得小巧很多，运行速度比angular快。
     • vue有组件化概念，angular中没有。
     • vue中数据放在data对象里面，angular数据绑定在$scope上面。

四、vue学习网址

• vue2.0中文文档：https://cn.vuejs.org/v2/guide/index.html
• vue2.0源码：https://github.com/vuejs/vue
• vue3.0中文文档：https://vue3js.cn/docs/zh/guide/migration/introduction.html
• Element-UI组件：https://element.eleme.cn/#/zh-CN/component/quickstart
• IView组件：https://www.iviewui.com/docs/introduce
• vue官方工具：https://github.com/vuejs
• vue官方论坛：forum.vuejs.org

​

​