常见的vue面试题：
1、生命周期
1.1 都有那些生命周期
beforeCreate(),created(),beforeMounte(),mounted(),beforeUpdate(),updated(),beforeDestroy(),destroyed()
1.2 页面加载时会执行那些生命周期
beforeCreate(),---啥也没有
created(),---没节点，有数据
beforeMounte(),---没节点，有数据
mounted()，---有节点，有数据
1.3 生命周期都是怎么用的 ，你都使用过那些生命周期
created()---一般用来进行数据初始化，发送网络请求等
mounted()---进行一些和DOM相关的操作
2、路由
1、路由传值(显式传值和隐式传值)
---显示传值
this.&router.push({
path:'/home'
query:{
//显示传值使用query，可以在url中看到
}
})
---隐式传值
this.&router.push({
name:'/home' //此处需要使用name,不能使用path
params:{
//隐式传值使用params，不可以在url中看到
}
})
2、路由的模式和区别
hash模式---有#
histroy模式---
3、路由导航守卫
全局路由导航守卫
router.beforeEach((to,from,next) =>{}),
afterEach((to,from) =>{})
组件内路由守卫
beforeRouteEnter((to,from,next) =>{})
beforeRouteUpdate((to,from,next) =>{})
beforeRouteLeave((to,from,next) =>{})
独享路由守卫
beforeEnter((to,from,next) =>{})
4、动态路由和子路由
动态路由 ， 在路由路径使用占位符 例：path:'/home/:id'
子路由使用childred , 路由结构更加清晰
3、keep-alive
缓存路由组件，用来缓存组件
使用keep-alive时多两个生命周期
activited---组件激活时调用
deactivited---组件失活时调用
使用keep-alive时，组件初始化第一次挂载时生命周期执行顺序
beforeCreate(),created(),beforeMounte(),mounted(),activited()
4、ref
用来获取DOM,对DOM节点做一个标记,相当于html中的id属性
用法：this.$refs.xxx
5、nextTick
当DOM加载完毕后才执行内部代码
6、axios的二次封装
1、为什么要进行封装
1、请求时显示loading...
2、对token进行判断，没有则跳转到登录页
3、做一些请求与响应的拦截
方便他人使用，减少代码冗余
7、Vuex
1、vuex有那些属性
state、getters、actions、mutations、state
2、在什么情况下使用vuex，为什么使用vuex？
1、管理数据方便，并且是响应式的数据
2、为什么使用moudels ,当数据较多时，数据不好管理，代码混乱，可以使用moudels将数据分类管理，便于维护，通俗易懂
3、vuex中mutations和actions 有什么区别？
1、mutations可以直接对state中的数据进行修改，虽然actions也可以修改，但是本质是要提交给mutations的
2、mutations修改数据是同步的 ，actions中是可以包含任何一步操作的
4、为什么mutations中修改state没问题，而直接修改state就会报错
不经过mutations不能直接修改state中的数据，因为state是实时更新的，
如果直接修改state中的数据是异步操作，当state异步还没有执行完，
state的数据就有可能发生变化，会导致程序出问题，
所以必须通过mutations限制state不允许异步操作
8、computed和methods和watch的区别
9、slot怎么使用，或者在什么场景下使用
默认插槽：话不多话，没有名字的插槽
具名插槽：插槽使用者通过 v-slot:插槽名 来决定使用的是那个插槽
作用域插槽：数据流向问题(数据在子组件，需要传递到父组件使用,父组件必须使用<template v-slot:名字="数据"></template>来接收数据)，下图则为作用域插槽
10、组件传值方式
11、v-model双向绑定原理
12、v-if和v-show的区别
v-if的true和false决定了是否加载对应的DOM节点
而使用v-show时，对应的DOM节点已经加载，只是通过true和false控制这个DOM节点的display属性将节点进行显示与隐藏
13、说下你理解的MVVM
14、样式穿透
1、 使用 /deep/
2、 使用 >>>
15、scoped的原理
scoped是vue文件的style标签中的特殊属性,
使用scoped属性后,css样式只能作用于当前的组件,可以使组件之间的样式不会互相污染
原理：使用scoped属性后，可以为组件实例生成一个唯一标识，
给组件中每个标签对应的DOM元素添加一个标签属性，具体表现为 data-v-xxx
16、v-if和v-for的优先级？为什么不能同时使用？如果确实有需求要一起使用怎么办？
vue源码中 v-for的优先级高于v-if
为什么不能同时使用呢？因为v-for的优先级比v-if高，就导致列表会先全部遍历出来，在一个一个判断是否显示，就会造成渲染了无用的dom节点，浪费了性能，我们可以使用**computed**来解决这个问题
如以下代码：使用computed对数据先进行过滤后在进行渲染
<ul>
<li v-for="i in List" :key="i" >
{{i}}
</li>
</ul>
computed() {
List() {
return [1, 2, 3, 4, 5].filter(item => item !== 3)
}
}
