1.1．Vue简介和基本使用Vue是一个用于动态构建用户界面的渐进式JavaScript框架。框架遵循MVVM模型，编码简单，体积小，运行效率高；它借鉴了Angular的模板和数据绑定技术，以及React的组件化和虚拟DOM技术。vue还有一个vue全家桶，比如vue脚手架：vue-cli。Ajax请求：vue-resource，路由：vue-router，状态管理：vuex，图片懒加载：vue-lazyload，移动UI组件库：min-ui，PC组件库：element-ui，页面滑动：vue-Scroller和其他插件；基本使用：引入vue.js，创建vue实例对象，其中el代表dom标签选择器，data代表初始化数据对象；el：指定dom标签容器的选择器，一般写一个根标签；data：对象或函数类型，指定初始化状态属性数据的对象。可以使用{{xxx}}直接访问页面上的方法：一个包含多个方法的对象，用于页面上的事件指令回调。回调函数默认有$event参数。您也可以指定自己的参数。在方法中可以直接使用this.xxx来访问data中的属性；computed：计算属性，包含多个方法的对象，对状态属性进行计算处理并返回一个新的数据给页面，使用get和set方法实现属性的计算和读取，同时监控数据的变化；watch：监控，包含多个属性监控的对象，xxx.function(value){}，可以传入两个参数，代表新值和改变之前的值，也可以使用vm.$watch('xxx',function(value){})添加监控；vue中的transition和animation本质上就是vue操作css的transition/animation属性；生命周期：常用的钩子函数有created()/mounted()：启动异步任务（启动定时器、发送ajax请求、绑定监听器）和beforeDestroy()：做一些清零定时器等收尾工作；自定义过滤器：使用的是Vue.filter(filterName,function(value){})，在页面上使用：{{myData|filterName(arg)}}，参数可传可不传；vue内置指令：v-for遍历、@binding事件、v-model数据双向绑定、ref标识标签；自定义指令：使用Vue.directive注册全局指令，使用directives注册局部指令；注意：数据在哪个组件中，更新数据的行为（方法）要定义在那个组件1.2中。Vue的知识点梳理1).Vue的核心思想数据驱动，组件系统2）。Vue的常用UI组件库MintUI,element,VUX,vue-maretial3).vue-cli项目中src目录下的各个文件夹和文件的用途。assets文件夹是存放静态资源的；components就是放组件；router是定义路由相关的配置；查看视图；app.vue是一个应用程序主要组件；main.js是入口文件等。4）什么是.vuex？如何使用？哪个功能场景使用它？vuex是vue生态系统中的状态管理。在main.js中引入store，注入，新建目录store，...导出等。常用场景包括：单页应用，组件间状态，音乐播放，登录状态，加入购物车等。*`state`：状态中心*`mutations`：改变状态*`actions`：异步改变状态*`getters`：获取状态*`modules`：将`state`分成多个`modules`以便于管理5)。vue生命周期6).vue的双向数据绑定原理的理解。vue.js使用数据劫持结合发布订阅者模式，通过Object.defineProperty()劫持各个属性的setter和getter。向订阅者发布消息并触发相应的监听回调。具体步骤：第一步：递归遍历需要观察的数据对象，包括子属性对象的属性，添加setter和getter。这种情况下给这个对象赋值会触发setter，然后就可以监听到数据变化了。第二步：compile解析模板指令，用数据替换模板中的变量，然后初始化渲染页面视图，并为每条指令对应的节点绑定一个update函数，添加订阅者监听数据，一旦数据变化，收到通知，更新视图第三步：Watcher订阅者是Observer和Compile之间的沟通桥梁，主要要做的事情是：>1.在实例化自己的时候将自己添加到属性subscriber(dep)中>2、它必须有一个update()方法>3、当属性变化时dep.notice()通知，它可以调用自己的update()方法，并触发Compile中绑定的回调，成功退出。7).Vue.js模板编译的理解简而言之就是先转成AST树，然后渲染函数返回VNode（Vue的虚拟DOM节点）详细步骤：>首先，通过compile编译器将模板编译成ASTsyntaxtree（抽象语法树是源代码的抽象语法结构的树状表示），compile是createCompiler的返回值，createCompiler用于创建编译器。此外，compile还负责合并选项。>然后，AST会通过generate获取render函数（将AST语法树转换成render函数字符串的过程），render的返回值是VNode，VNode是Vue的虚拟DOM节点，包含（标签名，子节点，文本等）8）。Vue优点轻量级框架：只关注视图层，它是构建数据的视图集合，大小只有几十kb；易学：中文开发，中文文档，无语言障碍，易懂易学；双向数据绑定：保留angular的特性，数据操作更简单；组件化：保留了react的优点，实现了html的封装和复用，在构建单页应用方面具有独特的优势；view，数据和结构分离：让数据的改动更简单，不需要修改逻辑代码，只需要操作数据就可以完成相关的操作；virtualDOM：dom操作非常耗性能，不再使用原生的dom操作节点，极大的解放了dom操作，但具体操作还是dom，只是换了一种方式；运行速度更快：与react相比，它还操作了virtualdom。在性能方面，vue有很大的差距优势。9）父子组件和父子组件的关系可以概括为props向下传递，event向上传递。父组件通过props向子组件发送数据，子组件通过事件向父组件发送消息。1）父组件传递给子组件：通过props属性。通过props接受子组件。2）将子组件传给父组件：通过$emit事件，发送事件名称10）Vue常用指令及用法11）v-model用法12）computed和watch使用场景computed：当一个属性受多个影响时attributes需要用到computed最典型的栗子：购物车产品结算时watch：一条数据影响多条数据时，需要用到watch栗子：搜索数据13）为什么vue组件中的数据必须是一个功能？（私有数据需要在函数中返回，避免多个实例共享一个对象。）由于JavaScript的特性，在组件中，数据必须以函数的形式存在，而不是对象。构建中的数据写成一个函数，将数据定义为函数返回值的形式，这样每次组件被复用时，都会返回一个新的数据，也就是说每个组件实例都有自己的私有数据空间，他们只对自己维护的数据负责，不会造成混乱。并且简单的写成一个对象的形式，即所有的组件实例共享同一个数据，换一个就换所有。14）单页面应用和多页面应用的区别和优缺点单页面应用（SPA），泛指只有一个主页面的应用。浏览器需要在一开始就加载所有需要的html、js、css。包含在这个所谓的母版页中。但是写的时候还是会单独写（页面碎片），然后在交互时由路由程序动态加载，单个页面的页面跳转只刷新本地资源。多用于PC端。多页（MPA）意味着一个应用程序中有多个页面。页面跳转时，刷新整个页面。单页的优点：用户体验好，速度快，内容变化不需要重新加载整个页面。基于这一点，spa服务器的压力较小；前后端分离；页面效果会更炫酷（比如切换页面内容时的特殊动画）。单页缺点：不利于SEO；导航不可用，如果一定要导航，需要自己实现前进后退。（由于是单页无法使用浏览器的前进后退功能，需要自己搭建栈管理）；第一次加载需要很多时间；页面的复杂度增加了很多。15)virtualdom原理实现创建dom树的diff，同层比较，输出patch(listDiff/diffChildren/diffProps)?如果没有新节点，则返回?新节点的tagName和keynode不变，比较props，继续递归遍历childrenTree>比较属性（比较新旧属性列表）：>旧属性是否存在于新属性列表中>两个已有属性是否有变化>是否有一个新的属性不在旧列表中?如果tagName和key值发生变化，则直接替换新节点的渲染差异?遍历patches，取出需要改变的节点?部分更新dom
