Vue知识点梳理(一)

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}}直接访问
• methods：包含多个方法的对象，供页面中的事件指令来回调，回调函数默认有$event参数，也可以指定自己的参数，在方法中，访问data中的属性直接使用this.xxx；
• computed：计算属性，包含多个方法的对象，对状态属性进行计算处理后返回给页面一个新的数据，使用get和set方法实现属性的计算读取，同时监视数据的变化；
• watch：监视，包含多个属性监视的对象，xxx.function(value){}，可以传入两个参数，代表新值和改变前的值，也可以使用vm.$watch('xxx', function(value){})的方式添加监听；
• vue中的过渡和动画，实质就是vue操作css的transition/animation属性；
• 生命周期：常用的钩子函数是created() / mounted(): 启动异步任务(启动定时器,发送ajax请求, 绑定监听)和beforeDestroy(): 做一些收尾的工作例如清除定时器等；
• 自定义过滤器：使用的是Vue.filter(filterName,function(value){})，在页面使用方法：{{myData | filterName(arg)}}，参数可传可不传；
• vue内置指令：v-for遍历、@绑定事件、v-model数据双向绑定、ref标识标签；
• 自定义指令：使用Vue.directive注册全局指令，使用directives注册局部指令；

注意：数据在哪个组件，更新数据的行为（方法）就应该定义在那个组件中

1.2.Vue的知识点梳理

1).vue的核心思想

数据驱动、组件系统

2).vue常用的UI组件库

Mint UI，element，VUX，vue-maretial

3).vue-cli项目中src目录每个文件夹及文件的用途

assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件等等

4).vuex是什么？怎么使用？哪种功能场景使用它

vuex是vue生态系统中的状态管理。在main.js引入store，注入，新建一个目录store，… export 等，
常用的场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等等。
*   `state`: 状态中心
*   `mutations`: 更改状态
*   `actions`: 异步更改状态
*   `getters`: 获取状态
*   `modules`: 将`state`分成多个`modules`，便于管理 

5).vue生命周期

6).vue的双向数据绑定原理的理解

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通Object.defineProperty()来劫持
各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter。
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，
并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

> 1、在自身实例化时往属性订阅器(dep)里面添加自己

> 2、自身必须有一个update()方法

> 3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，
则功成身退。

7).Vue.js的template编译的理解

简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）

详情步骤：

>首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 
即 源代码的抽象语法结构的树状表现形式），
compile是createCompiler的返回值，createCompiler是用以创建编译器的。
另外compile还负责合并option。

>然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，
render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

8).vue优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；

视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，
只需要操作数据就能完成相关操作；

虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，
但具体操作的还是dom不过是换了另一种方式；

运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。 

9)父子组件传值

父子组件的关系可以总结为prop向下传递，事件向上传递。
父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。
1）父组件传递给子组件：通过props属性来实现。子组件通过props接受。
2）子组件传递给父组件：通过$emit事件，发送事件名称

10)vue常用指令和用法

11)v-model的用法

12)computed和watch使用场景

computed:
    当一个属性受多个属性影响的时候就需要用到computed
    最典型的栗子： 购物车商品结算的时候
watch:
    当一条数据影响多条数据的时候就需要用watch
    栗子：搜索数据

13)vue组件中data为什么必须是一个函数？

（私有数据，需要在函数中返回以避免多个实例共享一个对象。）
因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份
新的data，
相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。
而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

14)单页面应用和多页面应用区别及优缺点

单页面应用(SPA),通俗来说指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css
所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），
然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；
页面效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。
（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；
初次加载时耗时多；页面复杂度提高很多。

15)virtual dom 原理实现

创建 dom 树
树的diff，同层对比，输出patchs(listDiff/diffChildren/diffProps)
    •    没有新的节点，返回
    •    新的节点tagName与key不变， 对比props，继续递归遍历子树
        > 对比属性(对比新旧属性列表):
        > 旧属性是否存在与新属性列表中
        > 都存在的是否有变化
        > 是否出现旧列表中没有的新属性
    •    tagName和key值变化了，则直接替换成新节点
渲染差异
    •    遍历patchs， 把需要更改的节点取出来
    •    局部更新dom