Vue2面试题

1.关于生命周期

1.1有哪些生命周期？发送请求是created还是mounted?

beforeCreated、created、beforeMount、mounted、beforeUpdate、update、beforeDestory、destory。使用keep-alive后，会多两个activated和deactivated。一共十个生命周期。

当组件中没有父子组件的依赖关系时，发送请求在created和mounted中都是可以的，都会在当前组件加载完后发送请求。如果存在依赖关系，且要求先显示子组件的数据，则应讲请求放到mounted中，若是先显示当前组件的数据则放到created中。

1.2 为什么发送请求不在beforeCreate里，beforeCreate和created有什么区别？

因为beforeCreate时，data、methods数据都没有。如果请求调用的是methods里面的请求方法，则会报错。

区别：

1.在beforeCreate没有$data,created有$data，可以访问methods。

1.3 在created中如何获取dom

在执行created时并没有生成dom元素，只有data。但因为Vue的生命周期是同步的，所以我们可以使用异步方法来获取dom,异步方法会在同步方法执行完成后再执行，所以这样就可以获得dom了。

具体方法：使用setTimeout(()=>{XXX})、axios()请求、Promise.then(XXX).catch(XXX)或者vue内置的this.$nextTick()

1.4 加入keep-alive组件会执行哪些生命周期

使用keep-allive组件后，当前组件会额外增加两个生命周期：activated和deactivated。并且第一次进入组件会执行activated。keep-alive主要用于缓存组件及数据，减少请求次数 。

1.5 你在什么情况下用过哪些生命周期？说一说生命周期使用场景

created => 单组件请求,

mounted => 如果子组件的数据显示优先，则把请求放到mounted,

activated => 判断id相等，不相等则发起请求,

destoryed => 关闭页面记录视频播放时间，初始化的时候从上一次的历史开始播放。

2.关于组件

2.1 组件传值（通信）的方式

父组件向子组件传递通信：子组件通过props定义属性。父组件通过这个属性给子组件传值。

// 父组件通过子组件属性传值
<template>
	<childComponent :pMsg = 'pMsg'></childComponent>    
</tenplate>
<script>
export default {
    name:'childComponent'
    data(){
        return {
            pMsg:'我是你爸爸'
        }
    }
}

// 子组件父组件的值
// 方法一： 子组件通过props接收父组件的值
// 这种方法，子组件无法直接修改父组件的值
<template>
	<div>{{pMsg}}</div>    
</tenplate>
<script>
export default {
    name:'childComponent'
    props:{
        pMsg:{
            type:String,
            default:''
        }
    }
}
</script>
// 方法二：使用$parent.pMsg使用父组件的data
// 这种方法可以修改父组件的值
<template>
	<div>{{$parent.pMsg}}</div>    
</tenplate>
// 方法三：父组件用provide\子组件用inject

子组件向父组件传递通信

2.2 子组件如何直接修改父组件的值

使用this.$parent.xxx

2.3 如何找到父组件

this.$parent 找不到返回自身

2.4 父组件如何直接修改子组件的值

this.$refs.child.xxx

2.5 如何找到根组件

this.$root

2.6 slot 插槽

插槽分为匿名插槽、具名插槽、作用域插槽

在子组件对应位置写slot标签并设置name属性，这是具名插槽。父组件进行调用时使用template标签并用#slotname指定要替换插槽的名称。有点类似函数传参的占位符，用指定元素替换了则生效，不替换则不生效。

作用域插槽就是父组件往子组件的插槽中传值，使用#slotname='{object1,object2}'

2.7 如何封装组件

就是写一个vue文件，作为公共组件。最好涉及到slot、父子组件通信等

3.关于Vuex

3.1 Vuex有哪些属性

state全局共享属性

getters 针对state数据进行二次计算

mutations 存放同步方法

actions 存放异步方法，并且来提交mutations

modules 把state数据进行细分

3.2 Vuex使用state值

this.$store.state.xxx

辅助函数：mapState。辅助函数形式获取的值的修改不会影响原state，因为辅助函数得到的是备份值。

3.3 Vuex的getters值修改

getters是不可以修改的

3.4 Vuex的mutations和actions区别

两者都是存放全局的方法，全局方法return的值拿不到

mutations是同步的

actions是异步的，返回一个Promise对象，可以执行异步操作。mutations是修改state的值，而actions的作用是提交mutations，使得state值得到修改。

3.5 Vuex持久化存储

Vuex不能进行持久化存储。需要自己手写localstorage或者使用vuex-persistedstate插件。

4 关于路由

4.1 路由模式及区别

路由模式：history、hash

区别：找不到页面history会向后端发送一次请求，hash不会。可以通过制作404页面来解决history的这个问题。

4.2 子路由和动态路由

4.3 导航故障

$router和$route

4.4 导航守卫

全局守卫

路由独享守卫

组件内守卫

5 关于API

5.1 $set

使用$set可以解决数据更新但是视图没有更新的问题。

this.$set(target, key, 修改后的值)

5.2 $nextTick

$nextTick是一个异步的方法

5.3 $refs

来获取dom的

5.4 $el

获取dom节点，html标签

5.5 $data

获取当前组件的data数据

5.6 $children

获取当前组件的所有子组件

5.7 $parent

获取当前组件的父组件

5.8 $root

获取根组件

5.9 data定义数据

数据定义在data的return内和外的区别。在外面不是响应式数据，没有绑定上get/set方法，数据的修改不会影响视图的修改。而在data内的是响应式的，数据的修改会影响视图的修改，但是当两者同时被修改时，两者的视图都会被修改。

5.10 computed

计算属性的结果值可以修改，通过get/set写法

5.11 watch

值发生改变才执行

设置deep可以进行深度监听

5.12 methods和computed的区别

computed有缓存机制，如果值没有发生改变，就只会执行一次。而methods没有，调用几次就执行几次。

6 关于指令

6.1 如何自定义指令

directives

// 全局定义组件
Vue.directive('demo', {
	inserted: function(a,b,c){
		console.log(a,b,c)
	}
}

<script>
    export default {
        directives:{
            demo:{
                bind:function(el){
                    console.log(el)
                }
            }
        }
    }
</script>

6.2 单项绑定

v-bind 单项绑定

v-model 双向绑定

6.3 v-if和v-for 优先级

vue2中 v-for < v-if

vue3中 v-if > v-for

7.关于原理

7.1 $nextTick原理

由于生命周期是同步的，使用异步方法Promise().resolve().then(()=>{})等dom渲染完成后，就能获取到dom了

7.2 axios二次封装

headers很重要

timeout设置超时时间

解决跨域问题

​ 1.前端解决

​ jsonp

​ vue中设置代理解决跨域，在vue.config.js中的devServer中配置代理

​ 2.后端解决

接口封装（基操）

好处：1.统一url管理，方便日后更换。

在公司内封装

1.在src/utils/request.js中封装

2.用axios.create()创建实例

3.配置请求和响应拦截器。在请求拦截器中配置判断用户是否登录。在响应拦截器中判断。

8 diff算法

虚拟dom就是dom的数据化，将html节点编码成对象。修改dom虚拟对象的属性的性能要比直接修改html标签的性能高。修改完虚拟对象属性后再通过方法将对象转成真实dom在页面上渲染。

snabbdom库实现虚拟dom

{children,data,elm,sel,text,key}

vnode用于创建虚拟dom节点，还有个h函数

patch()实现真实或虚拟dom节点之间的替换，不是虚拟dom就会转成虚拟的进行替换

:key用来表示虚拟dom节点

新老节点替换规则

1.如果新老节点的名称不同，就暴力删除并创建新的插入

2.只能同级比较，不能跨层比较，如果跨层就暴力删除再插入

3.如果是相同节点，有多个情况

​ 3.1 新节点没有child，就证明新节点是文本，直接把旧文本替换新文本

​ 3.2 新节点有child，旧节点也有child ==>涉及到diff算法核心。新的有，旧的没有则创建元素添加，替换掉旧的子节点内容。

9 什么是MVVM框架

MVVM框架就是Model-View-ViewModel的简称，Model指的是被用于渲染到视图上的数据，View就是页面上的视图，ViewModel就是类似Vue的实现数据与视图能够双向更新即双向绑定的框架。

它解决了早期

1.Web 1.0 前后端都在一个项目内，前后端协作困难，项目不好维护的问题。

2.Web 2.0 出现Ajax可以前后端分离，但是前端js、css、html都在一个页面，前端不好维护的问题。