Vue2篇
一、Vue2篇
1.1 生命周期有哪些？发送请求在created还是mounted？
Vue2.x系统自带有8个
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
这个问题具体要看项目和业务的情况了，因为组件的加载顺序是，父组件引入了子组件，那么先执行父的前3个生命周期，再执行子的前4个生命周期，那么如果我们的业务是父组件引入子组件，并且优先加载子组件的数据，那么在父组件中当前的请求要房mounted中，如果当前组件没有依赖关系那么放在哪个生命周期中请求都是可以的。
1.2 为什么发送请求不在beforeCreate里？beforeCreate和created有什么区别？
为什么发送请求不在beforeCreate里？
因为：如果请求是在methods封装好了，在beforeCreate调用的时候，beforeCreate阶段是拿不到methods里面的方法的（会报错了）。
beforeCreate和created有什么区别？
beforeCreate没有$data
created中有$datacreated是可以拿到methods的方法的
beforeCreate拿不到methods的方法
1.3 在created中如何获取dom
1. 只要写异步代码，获取dom是在异步中获取的，就可以了。例如：setTimeout、请求、Promise.xxx()等等...
2. 使用vue系统内置的this.$nextTick
1.4 一旦进入组件会执行哪些生命周期？
beforeCreate
created
beforeMount
mounted
1.5 第二次或者第N次进去组件会执行哪些生命周期？
如果当前组件加入了keep-alive,只会执行一个生命周期
activated
如果没有加入keep-alive
beforeCreate
created
beforeMount
mounted
1.6 父组件引入子组件，那么生命周期执行的顺序是？
父：beforeCreate、created、beforeMount
子：beforeCreate、created、beforeMount、mounted
...（若有其他子组件、挨个执行）
父：mounted
1.7 加入keep-alive会执行哪些生命周期
如果使用了keep-alive组件，当前的组件会额外增加2个生命周期（系统8 + 2）
activated
deactivated
如果当前组件加入了keep-alive第一次进入这个组件会执行5个生命周期
beforeCreate
created
beforeMount
mounted
activated
1.8 你在什么情况下用过哪些生命周期？说一说生命周期使用场景
created ===> 单组件请求
mounted ===> 同步可以获取dom，如果先子组件请求后父组件请求
activated ===> 判断id是否相等，如果不相等发起请求
destroyed ===> 关闭页面记录视频播放时间，初始化的时候从上一次历史开始播放
2. 关于组件
2.1 组件传值（通信）的方式
父传后代（后代拿到了父的数据）
1. 父组件引入子组件，绑定数据<List :str1='str1></List>子组件通过props来接受props: {str1:{type:String,default:''}}***这种方式父传子很方便，但是父传给孙子辈分的组件就很麻烦（父=>子=>孙）这种方式：子不能直接修改父的数据2. 子组件直接使用父组件的数据子组件通过：this.$parent.xx使用父组件的数据这种方式：子可以直接修改父组件的数据
3. 依赖注入优势：父组件可以直接向某个后代组件传值（不用一级一级的传递）缺点：找不到是由哪个父组件传过来的
后代传父（父拿到了后代的数据）
1. 子组件传值给父组件子组件定义自定义事件 this.$emit
2. 父组件直接拿到子组件的值<List ref='child'><List>this.$refs.child
平辈之间的传值（兄弟可以拿到数据）通过新建bus.js文件来做
2.2 父组件直接修改子组件的值
<List ref='child'><List>this.$refs.child.xxx = 'yyy'
2.3 子组件如何直接修改父组件的值
子组件中可以使用：this.$parent.xxx去修改
2.4 如何找到父组件
this.$parent
2.5 如何找到根组件
this.$root
2.6 keep-alive
keep-alive是什么：缓存当前组件
2.7 slot/插槽
匿名插槽：插槽没有名字
具名插槽：插槽有名字
作用域插槽：传值
2.8 provide/inject
provide/inject ===>依赖注入
2.9 如何封装组件
组件一定要难点，设计的知识点：slot\组件通信
3. 关于Vuex
3.1 Vuex有哪些属性
state ===> 全局共享属性
getters ===> 针对state数据进行二次计算
mutations ==> 存放同步方法的
actions ===> 存放异步方法的，并且是用来提交mutations
modules ===> 把vuex再次进行模块之间的划分
3.2 Vuex使用state值
this.$store.state.xxx
辅助函数：mapState
以上两种方式都可以拿到state的值，那么区别的什么？
使用this.$store.state.xxx是可以直接修改vuex的state的数据的
使用辅助函数的形式，不可以直接修改数据
3.3 Vuex的getters值修改
面试官可能会这样问：组件使用了getters中的内容，组件使用采用v-model的形式会发生什么？
getters是不可以修改的
3.4 Vuex的mutations和actions区别
相同点：mutations和actions都是用来存放全局方法的，这个全局方法return 的值拿不到
区别：mutations ===> 同步actions ===> 返回的是一个Promise对象，他可以执行相关异步操作
mutations 是来修改state的值的，actions的作用是来提交mutations
3.5 Vuex持久化存储：我们在页面使用了state值：1，然后把1修改成2，然后刷新页面又回到1为什么
Vuex本身不是持久化存储的数据，Vuex是一个状态管理仓库（state：全局属性）===> 就是存放全局属性的地方。
实现持久化存储：1. 之自己写localStorage 2. 使用vuex-persistedstate插件
使用方法：
yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstateimport Vue from 'vue'
import Vuex from 'vuex'
// 引入插件
import createPersistedState from "vuex-persistedstate";Vue.use(Vuex)const state = {};
const mutations = {};
const actions = {};const store = new Vuex.Store({state,mutations,actions,/* vuex数据持久化配置 */plugins: [createPersistedState({// 存储方式：localStorage、sessionStorage、cookies 默认: localStoragestorage: window.sessionStorage,// 存储的 key 的key值key: "store",render(state) {// 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据return { ...state };}})]
});export default store;缓存State下的部分数据
import Vue from 'vue'
import Vuex from 'vuex'
// 引入插件
import createPersistedState from "vuex-persistedstate";Vue.use(Vuex)const state = () => {return {token: '',uid: ''}
}const store = new Vuex.Store({// ...plugins: [createPersistedState({storage: window.sessionStorage,reducer(val) { // val就是上面的statereturn {// 只储存state中的token，而不会缓存uidtoken: val.token}}})]
})4. 关于路由
4.1 路由的模式和区别
路由的模式：history、hash
区别：
1. 关于找不到当前页面发送请求的问题history会给后端发送一次请求hash不会
2. 关于项目打包前端自测问题hash是可以看到内容的history默认情况是看不到内容的
3. 关于表象不同hash:#history:/
4.2 子路由和动态路由
4.3 路由传值
4.4 导航故障
解决：
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {return originalPush.call(this, location).catch(err => err)
}
4.5 $router 和 $route区别
$router 不仅包含当前路由还包含整个路由的属性和方法
$router 包含当前路由对象
4.6 导航守卫
1. 全局守卫：beforeEach 路由进入之前afterEach 路由进入后
2. 路由独享守卫beforeEnter 路由进入之前
3. 组件内守卫beforeRouteEnter 路由进入之前beforeRouteUpdate 路由更新之前beforeRouteLeave 路由离开之前
5. 关于API
5.1 $set
面试官：你有没有碰到过，数据更新视图没有更新的问题 ===> $set
this.$set(target,key,修改后的值)
5.2 $nextTick
$nextTick 返回的参数【函数】，是一个异步的
功能：获取更新后的dom
5.3 $refs
来获取dom的
5.4 $el
来获取当前组件的根节点
5.5 $data
来获取当前组件的data数据的
5.6 $children
$children 获取当前组件的所有子组件的
5.7 $parent
找到当前组件的父组件，如果找不到返回自身
5.8 $root
找到根组件
5.9 data定义数据
数据定义在return内和return外的区别1. return外：单纯修改这个数据是不可以修改的，因为没有被get/set
2. return内：是可以修改的
5.10 computed计算属性
computed计算属性的结果值可以修改吗？可以的，需要通过get/set写法
当前组件v-model绑定的值是computed来的，那么可以修改吗？可以的，需要通过get/set写法
5.11 watch
立即监听：初始化的时候可以执行
（默认初始化不执行）
5.12 methods和computed区别
computed是有缓存机制的，methods是没有缓存机制的（调用几次执行几次）
6. 关于指令
6.1 如何自定义指令
全局注册main.js
局部注册
6.2 vue单项绑定
双向绑定：v-model
单向绑定：v-bind （如：父子组件）
6.3 v-if和v-show
vue2中：v-for > v-if
vue3中：v-if > v-for
7. 关于原理
7.1 $nextTick原理
$nextTick功能：获取更新后的dom
