vue.js总结

vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue安装及配置环境搭建

一、安装node.js（https://nodejs.org/en/）
下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。

二、设置nodejs prefix（全局）和cache（缓存）路径
1、在nodejs安装路径下，新建node_global和node_cache两个文件夹

2、设置缓存文件夹
npm config set cache “D:\vueProject\nodejs\node_cache”
设置全局模块存放路径
npm config set prefix “D:\vueProject\nodejs\node_global”
设置成功后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

三、基于 Node.js 安装cnpm（淘宝镜像）
npm install -g cnpm --registry=https://registry.npm.taobao.org

四、设置环境变量（非常重要）
说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。
2、修改系统变量PATH

3、新增系统变量NODE_PATH

五、安装Vue
cnpm install vue -g

六、安装vue命令行工具，即vue-cli 脚手架
cnpm install vue-cli -g
七、新项目的创建
1.打开存放新建项目的文件夹

打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录

2.根据模版创建新项目

在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。
vue init webpack-simple mytest
初始化完成后的项目目录结构如下：

3、安装工程依赖模块

定位到mytest的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules
cd mytest
cnpm install

4、运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。
cnpm run dev

优点

（1）双向数据绑定
也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。
也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
（2）组件化开发
在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。
Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
（3）Virtual DOM
现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
（4）轻量高效
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
其他优点：
（1）动画系统
Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果，还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。

缺点

1、Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。
2、VUE不支持IE8
3、生态环境差不如angular和react
4、社区不大

MVVM模式：

说到vue的双向绑定首先联系到的就是MVVM(Model-View-ViewModel)模式了，如下图所示，当试图发生改变的时候传递给VM,再让数据得到更新，当数据发生改变的时候传给VM,使得试图发生改变； MVVM模式是通过以下三个核心组件组成，每个都有它自己独特的角色：

1. Model - 包含了业务和验证逻辑的数据模型

2. View - 定义屏幕中View的结构，布局和外观

3. ViewModel - 扮演“View”和“Model”之间的使者，帮忙处理 View 的全部业务逻辑

vue数据双向绑定原理：

vue的数据双向绑定主要通过Object.defineProperty()方法来进行数据劫持以及发布者-订阅模式来实现的，
vue是怎么实现数据劫持的呢？vue实例话的时候会去遍历所有的属性，给这些属性添加get和set方法进行数据劫持；

以上就是mvvm实现双向绑定的思路了，那么具体怎么实现呢？

我们开头的时候说到了，要想实现数据的双向绑定首先就要通过数据拦截来进行监听数据的改变，这个时候就要设置一个监听器Observer来进行监听，如果属性发生改变的话就告诉订阅者Watcher看看是否需要改变，同时的话订阅者可以有好多个，我们就用一个订阅者管理器(Dep)来管理这些订阅者。紧接着我们还要有个指令解析器来对每个节点进行扫描和解析（解析节点的指令如v-on）,把他们初始化成一个订阅器Watcher,并且绑定相应的函数，Watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染；

以上的图片可以具，体归纳为：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

什么是vue全家桶？

vue（整体架构） +  vuex（状态管理） +  vue-router（路由） +  vue_resource || axios（ajax请求） +  mint-UI(移动端UI框架库) || element-ui(饿了么公司PC端UI框架库)