Vue常见面试题

1、Vue实现双向数据绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
通过 getter 和 setter 劫持了对对象赋值的过程，在这个过程中可以进行更新 dom 操作等等

2、bus需要注意什么

事件订阅必须在事件广播前注册；
取消事件订阅必须跟事件订阅成对出现。
数据量比较少时可以使用，业务多或者数据比较复杂建议使用vuex

3、v-model 是一个语法糖它是怎么进行封装的

其实v-model只不过是一个语法糖而已,真正的实现靠的还是
(1) v-bind:绑定响应式数据
(2) 触发 input 事件 并传递数据 (重点)

4、组件传值

1. 父子组件传值
   （1）父组件传给子组件：主要通过prop属性
   详细：父组件在调用子组件的时候，传入自定义参数。子组件通过prop属性来接收父组件传的值

   （2）子组件传给父组件：主要通过触发自定义事件
   		 详细：父组件在调用子组件的时候，通过v-on定义自定义事件，并绑定自定义事件触发时的执行函数。
   		 在子组件中在需要传值给父组件数据的地方通过this.$emit(key,值)触发父组件中的自定义事件，并传入参数，
   		 并进行传值。（其中：key表示自定义事件名，值表示要传递的值）
   

2. 非父子组件传值
   可以使用eventBus 或者使用vuex
   eventBus使用方法
   1、创建一个公共的vue实例
   方式1：创建一个公共的vue实例（在js中），并且导出，在传值和接收值的两方面都引入这个js
   方式2: vue.prototype.bus = new Vue()
   表示先在vue的原型上添加bus属性，值为vue的一个实例x。之后创建的vue实例中都带有bus属性，
   并且bus属性值都指向vue实例x
   2、再传值的组件中，调用公共的vue实例，通过vue实例.$emit()，传值。传值方触发自定义事件3、在接收的组件中，调用公共的vue实例，通过vue实例.$on()接收。 接收方注册自定义事件。
   注意：触发和监听两个操作必须在公共的vue实例中进行传值和接收值

路由导航守卫

beforeEach 主要有三个参数：to，from，next；在这里我们用来判断当前用户有没有token值 如果没有token就用next方法里面跳转到登陆页面
to：route即将进入的目标路由对象
from：route 当前导航正要离开的路由
Next：function 一定要调用该方法的resolve这个钩子，执行效果依赖next方法的调用参数，可以控制页面的跳转。

$router 全局的路由器对象，里面有很多属性和子对象，像页面跳转 this.$router.push()
$route  当前正在跳转的路由对象，可以从里面获取携带的参数  比如name，path，params，query等 
例如 this.$route.params.userid

vue路由传参的三种基本方式

1、直接调用$router.push 实现携带参数的跳转。（页面获取参数：this.$route.params.id）页面刷新数据不丢失
2、通过路由属性中的name来确定匹配的路由，通过params来传递参数。（页面刷新，数据丢失）
3、使用path来匹配路由，然后通过query来传递参数   （query传递的参数会显示在url后面?id=？）

vuex 怎么做数据持久化

vuex-persistedstate 插件 或者 我觉得用sessionstrage也行

js数组高阶函数

js数组相关的高阶函数

为什么要用深拷贝

为了避免数据源被污染
使用方式

1、使用json转化
var targetObj = JSON.parse(JSON.stringify(copyObj))
let arr4 = JSON.parse(JSON.stringify(arr))
缺点 （1）如果对象里有函数,函数无法被拷贝下来

（2）无法拷贝copyObj对象原型链上的属性和方法

（3）当数据的层次很深，会栈溢出

2、递归函数

await和async

await
async

vuex的属性 和流程

    State、 Getter、Mutation 、Action、 Module （就是mapAction等）

    vuex的流程

    页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。
    最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值

对 keep-alive 的理解

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

axios 中interceptors 的作用

拦截器

axios.interceptors.request.use(functon(config){
//添加一个请求拦截器
return config
},function(err){
})；
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回的数据进行处理
return res;
},function(err){

})}

vue中Vue.nextTick()这个api的作用是什么，什么时候会用到

作用：主要涉及到vue中dom的异步更新
应用场景：
（1）在vue生命周期的created()钩子函数进行DOM操作一定要放在Vue.nextTick()的回调函数中
（2）在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，
这个操作都应该放在vue.nextTick()的回调函数中

watch和computed的区别

watch 属性监听 监听属性的变化
computed:计算属性通过属性计算而得来的属性

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

computed中的函数必须用return返回最终的结果
watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；

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