Vue知识点

1、vue双向数据绑定的原理是什么？

首先传输对象的双向数据绑定Object.defineProperty(target, key, decription),在decription中设置get和set属性（此时应注意description中get和set不能与描述属性共存）
数组的实现与对象不同。
同时运用观察者模式实现wather，用户数据和view视图的更新

2、vue-router完整的导航解析流程？

3、vue-router路由的两种模式

vue-router中默认使用的是hash模式
（1）hash模式http://localhost:8080/#/pageAhash 的值为 #/pageA改变hash，浏览器本身不会有任何请求服务器动作的，但是页面状态和url已经关联起来了。
（2）history模式http://localhost:8080/ 正常的而路径，并没有#
hash模式背后的原理是onhashchange事件
hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，后来人们给它起了一个霸气的名字叫前端路由，成为了单页应用标配。
history模式的问题
通过history api，我们丢掉了丑陋的#，但是它也有个问题：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。 在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

4、vuex的核心概念

state => 基本数据 
getters => 从基本数据派生的数据 
mutations => 修改数据，
同步 actions => 修改数据，
异步 modules => 模块化Vuex

5、new Vue()中究竟发生了什么？

new Vue()是实例化一个Vue对象
在构造函数中执行_init(options)，随后导入五大Mixin,进行实例化的初始化过程
initMixin(Vue) // options初始化
stateMixin(Vue) // 状态（props、state、computed、watch）
eventsMixin(Vue) // 事件
lifecycleMixin(Vue) // 生命周期
renderMixin(Vue) // 页面渲染
initLifecycle:初始化生命周期
initEvents：初始化事件
initRender：渲染页面
callHook(vm,‘beforeCreate’) ：beforeCreate钩子函数
initState：初始化状态 props data computed watch methods
callHook(vm,‘created’):created钩子函数

6、Proxy 与 Object.defineProperty 优劣对比？

Proxy 的优势如下:
1）Proxy 可以直接监听对象而非属性；
2）Proxy 可以直接监听数组的变化；
3）Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
4）Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
5）Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
Object.defineProperty 的优势如下:
兼容性好，支持 IE9，而Proxy 的存在浏览器兼容性问题，而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

7、生命周期钩子是如何实现的？

Vue的生命周期钩子就是回调函数而已，当创建组件实例的过程中会调用对应的钩子方法。

8、provide / inject 适用于 隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

9、Vue.minxin的使用场景和原理？

在组件中一个个引入是一种方式，但是，倘若有些公共组件使用频率很高，使用mixin（混入）就可以很方便地引入公用部分，mixin是一个js对象文件
mixin中有很多缺陷“命名冲突问题”，“依赖问题”，“数据来源问题”，这里强调一下mixin的数据是不会被共享的。

10、Vue-router有几种钩子函数？具体是什么及执行流程是怎样的？

路由钩子的执行流程，钩子函数种类有：全局守卫、路由守卫、组件守卫。
完整的导航解析流程
    1.导航被触发；
    2.在失活的组件里调用beforeRouteLeave守卫；
    3.调用全局beforeEach守卫；
    4.在复用组件里调用beforeRouteUpdate守卫；
    5.调用路由配置里的beforeEnter守卫；
    6.解析异步路由组件；
    7.在被激活的组件里调用beforeRouteEnter守卫；
    8.调用全局beforeResolve守卫；
    9.导航被确认；
    10.调用全局的afterEach钩子；
    11.DOM更新；
    12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

11、nextTick在哪里使用？原理是？

nextTick的回调是在下次DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

12、Vue 为什么需要虚拟DOM？ 虚拟DOM的优劣如何？

Virtual DOM 就是用js对象来描述真实DOM，是对真实DOM的抽象，由于直接操作DOM性能低但是js层的操作效率高，可以将DOM操作转化成对象操作，最终通过diff算法比对差异进行更新DOM (减少了对真实DOM的操作)。
虚拟DOM的实现就是普通对象包含tag、data、children等属性对真实节点的描述。（本质上就是在JS和DOM之间的一个缓存）
Vue2的 Virtual DOM 借鉴了开源库snabbdom的实现。
VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。

13、Vue中key的作用和工作原理，说说你对它的理解

key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

14、v-if 与 v-for的优先级

1、v-for优先于v-if被解析
2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3、要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
4、如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

15、computed 和 watch 的区别和运用的场景？

核心答案：
computed： 计算属性。依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 监听数据的变化。更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
1）当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；使用 场景：购物车结算
2）当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。使用场景：搜索、滚动锚点定位

16、eventBus 在vue中的使用

17、$router 和 $route 区别

$router是VueRouter的实例对象，有push、replace等方法；
$route是路由信息对象、获取页面传递的参数，path、params、hash、query等路由信息参数；

18、params和query的区别

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据，params刷新 会 丢失 params里面的数据。