vue系列之面试总结

什么是vue生命周期

答： Vue 实例从建立到销毁的过程，就是生命周期。也就是从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期。
它的生命周期中有多个事件钩子，让咱们在控制整个Vue实例的过程时更容易造成好的逻辑。

Vue生命周期总共有几个阶段

它能够总共分为8个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后。
建立前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el尚未。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但仍是挂载以前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，可是dom结构依然存在。

第一次页面加载会触发哪几个钩子

答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

Vue的双向数据绑定原理是什么

答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：须要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每一个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变更，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通讯的桥梁，主要作的事情是:
一、在自身实例化时往属性订阅器(dep)里面添加本身
二、自身必须有一个update()方法
三、待属性变更dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM做为数据绑定的入口，整合Observer、Compile和Watcher三者，经过Observer来监听本身的model数据变化，经过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通讯桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变动的双向绑定效果。

axios的特色有哪些

答：
1、Axios 是一个基于 promise 的 HTTP 库，支持promise全部的API
2、它能够拦截请求和响应
3、它能够转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
4、安全性更高，客户端支持防护 XSRF

对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。
Model表明数据模型，也能够在Model中定义数据修改和操做的业务逻辑。
View 表明UI 组件，它负责将数据模型转化成UI 展示出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，链接Model和View。
在MVVM架构下，View 和 Model 之间并无直接的联系，而是经过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 所以View 数据的变化会同步到Model中，而Model 数据的变化也会当即反应到View 上。
ViewModel 经过双向数据绑定把 View 层和 Model 层链接了起来，而View 和 Model 之间的同步工做彻底是自动的，无需人为干涉，所以开发者只需关注业务逻辑，不须要手动操做DOM, 不须要关注数据状态的同步问题，复杂的数据状态维护彻底由 MVVM 来统一管理。

什么是MVC

MVC容许在不改变视图的状况下改变视图对用户输入的响应方式，用户把对View的操做交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操做，一旦Model发生变化便通知相关视图进行更新。
若是前端没有框架，只使用原生的html+js，MVC模式能够这样理解。将html当作view;js当作controller，负责处理用户与应用的交互，响应对view的操做（对事件的监听），调用Model对数据进行操做，完成model与view的同步（根据model的改变，经过选择器对view进行操做）;将js的ajax当作Model，也就是数据层，经过ajax从服务器获取数据。

MVVM与MVC区别

MVVM与MVC二者之间最大的区别就是：MVVM实现了对View和Model的自动同步，也就是当Model的属性改变时，咱们不用再本身手动操做Dom元素来改变View的变化，而是改变其属性后，该属性对应的View层数据会自动改变。
以Vue为例：

<div id="vueDemo">
  <p>{{ title }}</p>
  <button v-on:click="clickEvent">hello word</button>
</div>
var vueDemo = new Vue({  
    el: '#vueDemo',  
    data: {    
        title: 'Hello Vue!'  
    },  
    methods: {    
        clickEvent: function () {      
            this.title = "hello word!"  
        }  
    }
})

复制代码这里的html => View层，能够看到这里的View经过模板语法来声明式的将数据渲染进DOM元素，当ViewModel对Model进行更新时，经过数据绑定更新到View。
Vue实例中的data至关于Model层，而ViewModel层的核心是Vue中的双向数据绑定，当Model发生变化时View也能够跟着实时更新，同理，View变化也能让Model发生变化。
总的看来，MVVM比MVC精简不少，不只简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操做DOM元素。由于在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提升代码的可重用性。

Vue的路由实现：hash模式 和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特色：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动做，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号以前的内容会被包含在请求中，如 http://www.xxx.com，所以对于后端来讲，即便没有作到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）能够对浏览器历史记录栈进行修改，以及popState事件的监听到状态变动。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端若是缺乏对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还须要后台配置支持……因此呢，你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

Vue与Angular以及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在模板中提供了指令，过滤器等，能够很是方便，快捷地操做Virtual DOM。

vue路由的钩子函数

首页能够控制导航跳转，beforeEach，afterEach等，通常用于页面title的修改。一些须要登陆才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：
to：route即将进入的目标路由对象，
from：route当前导航正要离开的路由
next：function必定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。能够控制网页的跳转。

vuex是什么？怎么使用？哪一种功能场景使用它？

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，….. export 。
场景有：单页应用中，组件之间的状态、音乐播放、登陆状态、加入购物车
state
Vuex 使用单一状态树,即每一个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不能够直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
相似vue的计算属性，主要用来过滤一些数据。
action
actions能够理解为经过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操做数据。view 层经过 store.dispath 来分发 action。
modules
项目特别复杂的时候，可让每个模块拥有本身的state、mutation、action、getters,使得结构很是清晰，方便管理。

vuex中的变量是响应式的,页面刷新后数据没法保存?

解决方法：存sessionStorage、localStorage

若是变量状态不须要频繁变化，则存sessionStorage或localStorage较为合适。
若是变量状态须要频繁变化，或者在组件之间相互引用，则用vuex较为合适。

vue中 key 值的做用

答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。若是数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。key的做用主要是为了高效的更新虚拟DOM。
为何使用v-for时必须添加惟一的key?
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。若是不使用 key，Vue 会使用一种最大限度减小动态元素而且尽量的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化从新排列元素顺序，而且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会形成渲染错误。

$route和$router的区别

答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

什么是vue的计算属性

答：在模板中放入太多的逻辑会让模板太重且难以维护，在须要对数据进行复杂处理，且可能屡次使用的状况下，尽可能采起计算属性的方式。
好处：
①使得数据处理结构清晰；
②依赖于数据，数据更新，处理结果自动更新；
③计算属性内部this指向vm实例；
④在template调用时，直接写计算属性名便可；
⑤经常使用的是getter方法，获取数据，也可使用set方法改变数据；
⑥相较于methods，无论依赖的数据变不变，methods都会从新计算，可是依赖数据不变的时候computed从缓存中获取，不会从新计算。

组件中data何时能够适用对象

组件复用时全部组件实例都会共享data，若是data是对象就会形成一个组件修改data之后会影响到其余全部组件，因此须要将data写成函数，每次用到就调用一次函数得到新的数据
当咱们使用new Vue()的方式的时候，不管咱们将data设置为对象仍是函数都是能够的，由于new Vue()的方式是生成一个根组件，该组件不会复用，也就不存在共享data的状况

v-if与v-show的用法与区别

https://www.jianshu.com/p/2d3...

delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其余的元素的键值仍是不变。 Vue.delete直接删除了数组 改变了数组的键值。

关于 computed 和 watch 的差别

1. computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，因此用 watch 一样能够监听 computed 计算属性的变化（其它还有 data、props）
2. computed 本质是一个惰性求值的观察者，具备缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而 watch 则是当数据发生变化便会调用执行函数
3. 从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响多个数据；

Vue 组件 data 为何必须是函数

• 每一个组件都是 Vue 的实例。
• 组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其余。

vue router 优缺点

由 前端 来控制页面的跳转（但实际上是个单页面），根据不一样的 url 地址展现不一样的内容和页面。

优势：体验好，不须要每次从服务器获取所有，快速展示给用户；
缺点：不利于SEO；使用浏览器的前进，后退键的时候会从新发送请求，没有合理的利用缓存；单页面午餐记住以前滚动的位置，没法在前进和后退的时候记住滚动的位置。