vue的简单介绍

# Vue诞生背景
    从历史的潮流来说，人们从之前的:原生JS -> Jquery之类的类库 -> 前端模板引擎 ,他们都有一个共同的特点需要我们去操作dom元素。近几年来，得益于手机设备的普及和性能的提升，移动端的web需求大量增加，产生了一种叫webapp的东西，也就是移动端的网页应用。为了更好满足当前移动webapp项目的开发需求，MVVM框架诞生，而Vue便是这样的一种框架。
  问：那么什么是Vue?
	 官网有一句对它的介绍：通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue的核心主要包括下面两块：
  Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图；
  视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成（可维护、可重用）。

# vue大致介绍
读音 /vjuː/, 同view，是一套用于构建用户界面的渐进式 JavaScript 框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，同时vue也是MVVM框架
# vue官网
https://cn.vuejs.org/
# 作者
尤雨溪
# 版本划分
	  vue2： 使用量：少一点 ：https://v2.cn.vuejs.org/v2/guide/
    vue3： 使用量：多一点 ：https://cn.vuejs.org/guide/introduction.html
# 选项式 API 和组合式 API
	-vue2是选项式 API 
  -vue3两个都支持：推荐使用组合式api
   

MVVM发展

MVC（View Model Controller ）模式

    MVC框架最早出现在Java领域，在经典的MVC模式中，是用户通过Controller来操作Model以达到View的变化。MVC 即 Model-View-Controller 的缩写，就是 模型—视图—控制器，也就是说一个标准的Web 应用程式是由这三部分组成的：
  View ：用来把数据以某种方式呈现给用户；

  Model ：其实就是数据；

  Controller ：接收并处理来自用户的请求，并将 Model 返回给用户；

MVP(Model View Presenter)模式：

  而后的MVP模式（MVC模式的演变）逻辑层在Presenter里实现，而且Presenter与具体的View 是没有直接关联的，而是通过定好的接口进行交互（在MVC中View会直接从Model中读取数据而不是通过 Controller）。 View 与 Model 不发生联系，都通过 Presenter 传递。

    在HTML5 还未火起来的那些年，MVC 作为Web 应用的最佳实践是很OK 的，这是因为 Web 应用的View 层相对来说比较简单，前端所需要的数据在后端基本上都可以处理好，View 层主要是做一下展示，那时候提倡的是 Controller 来处理复杂的业务逻辑，所以View 层相对来说比较轻量，就是所谓的瘦客户端思想。  

    相对 HTML4，HTML5 最大的亮点是它为移动设备提供了一些非常有用的功能，使得 HTML5 具备了开发App的能力， HTML5开发App 最大的好处就是跨平台、快速迭代和上线，节省人力成本和提高效率，因此很多企业开始对传统的App进行改造，逐渐用H5代替Native，到2015年的时候，市面上大多数App 或多或少嵌入都了H5 的页面。既然要用H5 来构建 App， 那View 层所做的事，就不仅仅是简单的数据展示了，它不仅要管理复杂的数据状态，还要处理移动设备上各种操作行为等等。因此，前端也需要工程化，也需要一个类似于MVC 的框架来管理这些复杂的逻辑，使开发更加高效。

    注：Native（使用原生制作APP，即在基于目前的智能手机的操作系统(如安卓android、苹果IOS，另外还有 (windows phone) 的基础上，使用相应平台支持的开发工具和语言 ( 比如 iOS 平台支持 Xcode 和 Objective-C，安平台支持 Eclipse 和 Java) 编写的第三方移动应用程序，简称原生APP。）

    但实际上，随着H5 的不断发展，人们更希望使用H5 开发的应用能和Native 媲美，或者接近于原生App 的体验效果：

  1）开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。

　2）大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

　3）当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

MVVM(Model View ViewModel)模式

  Vue是基于MVVM架构模式的JavaScript框架，MVVM是Model-View-ViewModel的缩写，它是一种前端架构模式，与MVC（Model-View-Controller）和MVP（Model-View-Presenter）类似，但它更加关注于数据绑定和视图模板。
  
  在MVVM模式下，视图层（View）与数据层（Model）之间没有直接的联系，而是通过中间层（ViewModel）进行交互、通信，（ViewModel负责将模型层的数据转换成视图层的数据，同时监听视图层的变化并将变化的数据传递给模型层）Model和ViewModle之间的交互是双向的。因此，View数据的变化会同步到Model中，而Model中数据的变化也会影响。

Model：代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
View：代表UI组件，他负责将数据模型转化成UI展示出来
ViewModle：监听数据模型的改变和控制视图行为、处理用户交互；简单理解就是一个同步View和Model的对象，连接Model和View

组件化开发-(Single-Page application）

SPA(single-page application)组件化开发/单页应用，默认情况下我们编写 Vue、React 都只有一个html 页面，并且提供一个挂载点，最终打包后会再此页面中引入对应的资源。 (页面的渲染全部是由JS动态进行渲染的)。切换页面时通过监听路由变化，渲染对应的页面 client Side Rendering，客户端染 CSR
MPA(Multi-page application)多页应用，多个html页面。每个页面必须重复加载，js，css 等相关资源。
(服务端返回完整的 html，同时数据也可以再后端进行获取一并返回“模板引擎“）。多页应用跳转需要整页资源刷新。Server side
Rendering，服务器端渲染 SSR 如何分清在哪渲染:HTML 是在前端动态生成的“客户端染”，在服务端处理好并返回的是“服务端渲染。

优缺点

总结： 用户体验好、快，内容的改变不需要重新加载整个页面，服务端压力小

Vue与angularJS、React区别

1、与AngularJS的区别

 相同点：
    都支持指令：内置指令和自定义指令。
    都支持过滤器：内置过滤器和自定义过滤器。
    都支持双向数据绑定。
    都不支持低端浏览器。

不同点：
    AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
    在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
    Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
    对于庞大的应用来说，这个优化差异还是比较明显的。

2、与React区别

相同点：
    React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
    中心思想相同：一切都是组件，组件实例之间可以嵌套。
    都提供合理的钩子函数，可以让开发者定制化地去处理需求。
    都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
    在组件开发中都支持mixins的特性。
    
不同点：
    React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
    Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。
                       

Vue的特性

1) 轻量级的框架
   Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API

2) 双向数据绑定
    声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

3) 指令
    Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4) 组件化
    组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
    在 Vue 中，父子组件通过 props 传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。
    在开发中组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要自定义组件，使开发变得更加便利，可大量减少代码编写量。
    组件还支持热重载（hotreload）。当我们做了修改时，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。CSS 也支持热重载。

5) 客户端路由
    Vue-router 是 Vue.js 官方的路由插件，与 Vue.js 深度集成，用于构建单页面应用。Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，传统的页面是通过超链接实现页面的切换和跳转的。

6) 状态管理
    状态管理实际就是一个单向的数据流，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，使 State 产生变化，从而使 View 重新渲染，形成一个单独的组件。

# vue特点：
	· 渐进式
  · 声明式渲染/指令
  · 数据驱动视图
  · 极少的写DOM操作代码
  · 双向绑定
  · 组件系统
  · 不兼容IE8/不向下兼容,   Vue必须在ES5版本以上的环境下使用，一些不支持ES5的旧浏览器中无法运行Vue。

# Vue优点：
	· 体积小
  · 运行效率高
  · 双向的数据绑定，简化了DOM操作
  通过MVVM的思想是想数据的双向绑定
  · 生态丰富，学习成本低
  市场上有大量成熟且稳定的基于vue.js的ui框架，拿来即用
  · 快速开发，对初学者友好，上手快，入门易，资料多