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中有$data

created是可以拿到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-persistedstate


import 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  默认: localStorage
			storage: 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就是上面的state
            return {
                // 只储存state中的token，而不会缓存uid
                token: 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

7.2 双向绑定原理

8. axios二次封装