前端面试之VUE、React、uni-app、小程序（中）_uniapp beforerouteleave

vue的路由有哪些钩子函数，可以用来做什么

一、全局守卫

顾名思义，是要定义在全局的，也就是我们 index.js 中的 router 对象。

1. beforeEach

全局前置守卫，在路由跳转前触发，它在 每次导航 时都会触发。

通过 router.beforeEach 注册一个全局前置守卫。

参数

beforeEach 全局前置守卫接收三个参数

to: Route: 即将要进入的目标路由对象

from: Route: 当前导航正要离开的路由对象

next: Function: 一定要调用该方法不然会阻塞路由。

注意： next 参数可以不添加，但是一旦添加，则必须调用一次，否则路由跳转等会停止。

next（） 方法的几种情况

next(): 进行管道中的下一个钩子。

next(false): 中断当前的导航。回到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址，可传递的参数与 router.push 中选项一

致。

next(error): 导航终止，且该错误会被传递给 router.onError() 注册过的回调。、

router.beforeEach((to, from, next) => {

console.log('??~ to:', to);

console.log('??~ from:', from);

next();

})

复制代码2. beforeResolve

全局解析守卫，在路由跳转前，所有 组件内守卫 和 异步路由组件 被解析之后触发，它同样在 每次导

航 时都会触发。

通过 router.beforeResolve 注册一个全局解析守卫。

回调参数，返回值和 beforeEach 一样。也可以定义多个全局解析守卫。

3. afterEach

全局后置钩子，它发生在路由跳转完成后， beforeEach 和 beforeResolve 之后，

beforeRouteEnter （组件内守卫）之前。它同样在 每次导航 时都会触发。

通过 router.afterEach 注册一个全局后置钩子。

这个钩子的两个参数和 beforeEach 中的 to 和 from 一样。然而和其它全局钩子不同的是，这些钩

子不会接受 next 函数，也不会改变导航本身。

二、路由守卫

顾名思义，就是跟路由相关的钩子，我们的路由守卫只有一个，就是 beforeEnter 。

1. beforeEnter

需要在路由配置上定义 beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随

执行，不会在 params 、 query 或 hash 改变时触发。

beforeEnter 路由守卫的参数是 to 、 from 、 next ，同 beforeEach 一样。

三、组件守卫

顾名思义，是定义在路由组件内部的守卫。

router.beforeResolve((to, from, next) => {

next();

})

复制代码

router.afterEach((to, from) => {

console.log('??~ afterEach:');

})

复制代码

//index.js

{

path: '/a',

component: () => import('../components/A.vue'),

beforeEnter: (to, from) => {

console.log('??~ beforeEnter ');

},

},

复制代码1. beforeRouteEnter

路由进入组件之前调用，该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后，全局

beforeResolve 和全局 afterEach 之前调用。

参数包括 to ， from ， next 。

该守卫内访问不到组件的实例，也就是 this 为 undefined ，也就是他在 beforeCreate 生命周期

前触发。

2. beforeRouteUpdate

对于 beforeRouteUpdate 来说， this 已经可用了，所以给 next 传递回调就没有必要了。

3. beforeRouteLeave

对于 beforeRouteLeave 来说， this 已经可用了，所以给 next 传递回调就没有必要了。

四、总结

完整的导航解析流程

1. 导航被触发。

2. 在失活的组件里调用 beforeRouteLeave 守卫。

3. 调用全局的 beforeEach 守卫。

4. 在重用的组件里调用 beforeRouteUpdate 守卫。

5. 在路由配置里调用 beforeEnter 。

6. 解析异步路由组件。

7. 在被激活的组件里调用 beforeRouteEnter 。

8. 调用全局的 beforeResolve 守卫。

9. 导航被确认。

10. 调用全局的 afterEach 钩子。

11. 触发 DOM 更新。

12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函

数的参数传入。

//A.vue

beforeRouteEnter(to, from，next) {

console.log('??~ beforeRouteEnter');

},

复制代码

//A.vue

beforeRouteUpdate(to, from) {

console.log('??~ beforeRouteUpdate');

},

复制代码

//A.vue

beforeRouteLeave(to, from) {

console.log('??~ beforeRouteLeave');

},

复制代码计算属性通常用来干什么

一、理解计算属性的概念

计算属性的英文是computed，其实很多时候，一些概念从英文对照为中文后，会导致其中一些含义发生

错位与丢失，我们要想更好的理解computed计算属性，可以将这个概念分为两部分来看：

计算

这里的计算，是有种宏观的概念，指的是对于数据包的一种操作，比如:筛选、过滤、新增、

删除等。

说明computed本身是具有处理数据的能力。

属性

属性的意思是，一种可以读取、渲染的数据，性质跟data的作用相似

说明computed最终会给出一个数据供页面渲染使用。

由此，我们可以得出一个结论:

computed计算属性，负责将一些数据在其内部按照指定逻辑处理后，最终给出处理后的结果数

据，给到组件、页面进行渲染使用，可以让开发者更加便捷的处理一些动态变化的数据需求。

二、computed计算属性的特点

1. computed内部对data做出处理，其处理结果可以像data一样，可以直接在页面中渲染。

2. computed内部逻辑会 自动 识别到data的变化，从而做出新的操作，得出新的数据，从而自动更新

视图。

3. computed处理的数据具有 缓存 的能力，如果data不变，则页面中调用的都是computed第一次执

行时的运算结果，提高渲染性能。

三、computed应用场景

当某个前端已经指定的data数据包，如果我们渲染前，对其有过滤、筛选等操作需求，就可以使用

computed

1. 字符串翻转的官方案例，就是将一个普通字符串翻转后再渲染到视图。

1. 如果一个班级中有很多学生，每个学生通过一个对象来表达，现在我们需要根据学员成绩来进行

动态切换显示： 全部学员 、 及格学员 、 不及格学员 ，这种在本地进行筛选的需求可以快速通过

new Vue({

el:'#app', //占地盘

data:{

'msg':'Hello Vue' //自定义数据包

},

computed:{

reMsg(){ //专门用于反转msg的计算属性

return this.msg.split('').reverse().join('')

}

}

})computed实现，代码逻辑大致如下:

computed和watch的区别

上一个问题我们已经详细探讨了computed的相关特征，在这里我们可以逐一对比一下:

1. 两者都跟data有关，区别在于

computed 在处理完data后，会提供一个新的数据包以供使用

watch 只会监听某个指定data的变化，执行相关的逻辑，不会提供新的数据

2. 两者的使用倾向不同

computed 内部虽然有逻辑，但是使用时更加多的关心其提供的 新数据包

watch 更加关注data数据变化所引发的 行为逻辑

状态管理器的数据走向是什么

new Vue({

el:'#app', //占地盘

data:{

stu:[

{name:'张三丰',score:100},

{name:'DDK',score:50},

{name:'张翠山',score:60},

{name:'张无忌',score:90},

{name:'PDD',score:45}

],

status:0 //0全部 1及格 2不及格

},

computed:{

filterStu(){

let {stu,status} = this

// let stu = this.stu

// let status = this.status

switch (status) {

case 1: //及格

return stu.filter(item=>{

return item.score>=60

})

case 2: //不及格

let arr = stu.filter(item=>{

return item.score<60

})

return arr

default: //全部

return stu

}

}

}

})一、什么是状态管理？

状态管理就是，把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的

变化可以预测。

二、为什么需要状态管理？

状态共享

组件之间通常会有一些共享的状态，在 Vue 或者 React 中我们一般会将这部分状态提升至公共父组件的

props 中，由父组件来统一管理共享的状态，状态的改变也是由父组件执行并向下传递。这样会导致

两个问题:

需要将共享的状态提升至公共的父组件，若无公共的父组件，往往需要自行构造

状态由父组件自上而下逐层传递，若组件层级过多，数据传递会变得很冗杂

变化跟踪

在应用调试过程中，可能会有跟踪状态变化过程的需求，方便对某些应用场景的复现和回溯。这时候就

需要统一对状态进行管理，并遵循特定的约定去变更状态，从而让状态的变化可预测。

三、单项数据流

因为在真实项目开发过程中，Store状态管理器中的数据会在很多组件中用到，如果不设定一个统一的规

范去管理数据，最终将会导致数据混乱、使得项目变得难以维护。所以vuex状态管理器设计了如下几个

核心api，与视图之间进行交互配合:

state

vuex提供的，用以集中存储共享的数据。

mutations

vuex提供的，专门用以触发state数据变化的方法集，并且要求mutations的方法执行结果必须时可预

测的，在其内部不能出现异步请求等不可预测的逻辑。

actions

vuex提供的，专门用于让vuex进行异步请求处理的方法集，可选择使用。

view

视图层，整个项目组件的代称，我们在此处消费状态管理器提供的数据、方法。

数据走向必须遵循单向数据流的规范:

1. 当我们初始化使用状态机数据时的流程是

store---->state----> view

2. 当组件内部想要本地更新状态管理器的数据，其流程是

view触发---->mutations---->state---->store---->view更新

3. 当组件内部想要在异步请求后，再更新本地状态管理器的数据，其流程是

view触发---->actions---->mutations---->state---->store---->view更新vuex数据丢失怎么解决

vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，vuex 里面的

数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题。 如何解决浏览器刷新数据丢失

问题呢？

方法一：手动操作本地存储

全局监听，页面刷新的时候将 store 里 state 的值存到 sessionStorage 中，然后从sessionStorage 中获取，

再赋值给 store ，并移除 sessionStorage 中的数据。在 app.vue 中添加以下代码：

方法二：安装 vuex-persistedstate 插件

这时候就需要使用 sessionStorage 进行存储，修改 plugins 中的代码

怎么理解v-for的key值

created() {

window.addEventListener('beforeunload',()=>{

sessionStorage.setItem('list', JSON.stringify(this.$store.state))

})

try{

sessionStorage.getItem('list') &&

this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.

getItem('list'))))

}catch(err) {

console.log(err);

}

sessionStorage.removeItem("list");

}

1. npm install vuex-persistedstate -S //安装插件

2. 在 store/index.js 文件中添加以下代码：

import persistedState from 'vuex-persistedstate'

const store = new Vuex.Store({

state:{},

getters:{},

...

plugins: [persistedState()] //添加插件

})

plugins: [

persistedState({ storage: window.sessionStorage })

]

key的值一般为string或则number的类型，它用于解决在进行虚拟dom更新时的更新对象快速定位，虚拟dom更新需

要逐个对比虚拟dom对象绑定的数据，这个过程称为diff算法，所以key也是提升diff算法的一个标识符，因为数组

可能会进行排序以及增删等动作，所以使用数组的下标来定义key是没有任何作用的能不能自己实现v-model的功能

Vue双向数据绑定，怎么知道数据变了

退出登录头像还在是什么原因怎么办

vue数据双向绑定如何实现，如果不用vue，用原生js代码怎么实现

vue如何实现响应式，说一下原理，它有什么缺点？

include，exclude的区别

你说你使用懒加载优化页面，用的哪个版本的vue,看过源码吗, vue2.0不能

实现懒加载

可以的，自定义一个指令，给节点绑定上添加input的功能，数据使用value绑定，在用户输入数据的时候，采用

oninput事件来进行数据获取，并实时更新value数据，即可实现v-model的功能

在Vue2.x中采用ES5的对象属性定义方法(Object.defineProperty)来给每一个数据添加额外属性(getter和

setter属性)进行数据拦截，在vue内部实现对拦截数据的setter方法数据更新消息发布机制来获取数据更新消息，

对getter方法实现消息订阅机制来获取数据更新

多方面的原因引起的：

1、头像信息是否采用了应用缓存机制，如果有需要清除H5应用缓存

2、头像缓存在webStorage中，退出没有清除，直接清除

3、缓存在移动设备的数据，也需要清除

4、缓存在vuex或redux中的数据，直接清除即可

5、浏览器缓存，清除cookie或则强制清除浏览器缓存

1、获取传递进来的数据，然后对所有数据添加getter和setter方法，并在setter方法中添加消息订阅回调方法，

在getter方法中实现数据更新发布回调方法

2、对作用域内的所有dom节点进行数据以来处理，根据不同指令来实现不同订阅或发布回调方法绑定：如v-model绑

定的数据对象，在oninput事件中添加消息发布回调方法绑定，在v-text中添加value数据更新消息订阅回调方法绑

定

当在输入框输入值的时候，出发oninput事件，出发消息发布回调方法更新数据

当数据发生变化，触发订阅方法，执行dom数据更新方法，把最新数据更新到视图上

它使用ES5的Object.defineProperty方法把所有的属性全部改为setter和getter属性，在每一个组件中都有一

个watcher对象，当数据被赋值或变更的时候会通知页面的render方法对数据进行重新渲染，达到数据和视图的响应

更新

因为js的固有特性，不能动态观察对象动态添加、删除属性和数组的长度添加，所以vue2.x不能够动态进行数据双向

绑定，需要调用$set、$delete这些方法来实现动态添加双向绑定属性

这个是webpack中常常用于指定加载，对哪些文件进行加载的排除或包含的一个属性，include配置的文件路径中的

所有文件都将采用配置的loader进行文件加载处理，exclude是配置的路径都不要进行这个加载器的处理

这个与vue没有太大关系，采用的是ES6的动态加载机制来实现页面的懒加载，主要使用的webpack语法库为：

@babel/plugin-syntax-dynamic-import，在对页面引入的时候，需要把引入方式从：import MyComponent

from 'path' 修改为：const MyComponent = () => import('path')运用多个组件库,提取公共代码进行压缩,发现js代码过大，怎么处理

vue中爷孙通信怎么实现

vue怎么配置多个代理

为什么vue3.0双向数据绑定换成了proxy

你封装一个组件会有哪些考虑，用户用你的组件要怎么用？如果用户在使

用你组件的同时又想自己加一些按钮进去那么此时你的组件要怎么写？

回答：

1、封装组件会有哪些考虑，用户用你的组件要怎么用？

1）、封装组件和封装函数是同样的道理，需要考虑到组件的通用性。

2）、那么，组件的属性，组件事件，组件的内容都是需要考虑到的。

组件的属性：需要考虑到属性的类型限制，属性的默认值

组件的事件：组件事件对应的函数，需要考虑到函数的参数和返回值

组件的内容：要充分考虑到组件的通用性，灵活性。组件的内容给予使用者以更大的灵活空间。

2、如果用户在使用你组件的同时又想自己加一些按钮进去那么此时你的组件要怎么写？

1）、要么使用内容的方式（

vue中是插槽）

对组件不要做全局引入，可以采用动态引入和页面局部引入机制，减少文件首次加载的文件大小和文件进行打包时把所

有依赖进行一次性打包造成的文件过大问题

可以采用：eventBus事件机制来进行数据传递；也可以采用逐层props和$emit事件传递来实现传值；vuex数据传

递；使用v-model逐层数据传递等

在vue.config.js中使用devServer配置选项的proxy属性来进行多个代理配置

devServer: {

proxy: {

'/apis': {

target: 'http://www.baidu.com',

pathRewrite: {'/apis': ''}

},

'/info': {

target: 'http://www.sina.com',

pathRewrite: {'/info': ''}

}

}

}

因为Object.defineProperty方法的历史原因，如果要实现数据的劫持，需要遍历所有属性，如果是深层数据需要

递归来进行属性绑定；而proxy是直接代理此数据对象，不需要遍历绑定属性

如果对象有数据属性添加或则属性更新，需要重新给定数据劫持方法绑定，而proxy直接代理对象，不需要对属性做另

外的处理

因此可以在进行数据监听和劫持上节省很多数据遍历性能2）、要么提供一个render函数，由用户提供需要渲染的内容（如：按钮）。同时，根据自定义组件的情

况，可以考虑让用户把按钮渲染在指定的区域。即：render函数里有：渲染的区域和渲染的内容。

vue图片懒加载：①不考虑兼容性做法（你认为最好处理最效率的）②考虑

兼容性做法

回答：

1、场景：

一个网页如果包含了很多的图片，那么，服务器压力就会很大。不仅影响渲染速度还会浪费带宽。

通俗的说：你不看的图片我先不加载，也许你不看呢（哈哈），我何苦要做无效的事情呢

你想看时，我再加载（哈哈）

2、原理：

1）、先将img标签的src链接设为同一张图片(默认图片：可以是loading)，把图片的实际地址赋给一

个自定义属性。这时候所有的图片只发送一次请求。

2）、然后，当js监听到某张图片进入可视窗口时（说明你想看了），再将实际地址赋给src属性。

src属性的值发生变化时，浏览器才会发送请求加载当前图片。如果图片没有进入可视区域，就不会加载

图片（说明你还没想看呢），这样就大大的提高了效率。

3、示例代码（兼容性在代码中有注释）：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

li{

width: 100%;

height: 200px;

text-align: center;

line-height: 200px

}

img{

display: block;

height: 200px;

}

</style>

</head>

<body>

<div id="box">

</div>

</body>

</html><script>

let imgDoms = document.getElementsByTagName("img");

// 当前显示图片的最大下标：

let maxIndex = -1;

window.onload = function(){

// 1、从后端获取到所有的图片地址，先赋值给图片标签的自定义属性（data-src),给图片的src赋值为

loading

getImgs();

// 2、加载可视区域的图片

loadingImg();

}

window.onscroll = function(){

loadingImg();

}

// 从后端获取到所有的图片地址，先赋值给图片标签的自定义属性（data-src),给图片的src赋值为loading

function getImgs(){

//这个数组中的图片，可以是从后端获取到的，也可以写死。

let imgs =

["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","

img/8.jpg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg","img/14.jpg

","img/15.jpg","img/16.jpg","img/17.jpg","img/18.jpg","img/19.jpg","img/20.jpg","img/2

1.jpg","img/22.jpg","img/23.jpg","img/24.jpg","img/25.jpg","img/26.jpg","img/27.jpg","

img/28.jpg","img/29.jpg","img/30.jpg","img/31.jpg","img/32.jpg","img/33.jpg"];

let htmlStr = "";

for(let i=0;i<imgs.length;i++){

htmlStr+=`<img src="img/loading02.gif" data-src="${imgs[i]}" />`;

}

document.getElementById("box").innerHTML = htmlStr;

}

function loadingImg(){

// 1、计算当前滚动的高度+可视区域的高度（此处考虑的兼容性）

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

let clientHeight = document.documentElement.clientHeight ||

document.body.clientHeight;

let height = scrollTop+clientHeight;

// 2、得到应该显示图片的序号(可视区域最下面的图片序号)；

let index = Math.ceil(height/200)-1;

// 3、如果应该显示的图片的下标大于最大的下标，那就应该做图片的加载了。

if(index>maxIndex){

for(let i=maxIndex+1;i<=index;i++){

if(imgDoms[i].getAttribute("data-src")){

imgDoms[i].src = imgDoms[i].getAttribute("data-src");

imgDoms[i].removeAttribute("data-src");

}

}

}

maxIndex = index;

}

</script>vue组件中的data为什么必须是函数，为什么不可以是对象，数组这些

回答：

1、如果vue组件的data是一个对象，那么在复用vue组件时，由于对象是个引用类型。那么，每个组件

的data会指向同一块内存空间，组件之间的data就会互相影响。所以，组件中的data不能是对象。

2、vue框架中把data定义成函数，函数里返回真正的数据（引用类型）。每次复用组件时，vue框架都

会调用该函数。当调用该函数时，函数返回新的对象（申请新的空间）。那么不同的组件的内存空间就

是独立的，不会互相影响。

说说vue生命周期，发送请求在生命周期的哪个阶段，为什么不可以是

beforeMount，mounted中

回答：

1、vue的生命周期

1）、生命周期是什么？

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新

-> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2）、各个生命周期阶段及其钩子函数

vue的生命周期核心经历了四个阶段，在四个阶段的前后分别有两个钩子函数。

第一阶段：数据挂载阶段：把配置项data中的属性，赋给了vue对象本身，并做了数据劫持。

该阶段前后的两个钩子函数：beforeCreate和created

第二阶段：模板渲染阶段：把vue对象的数据渲染到模板上。

该阶段前后的两个钩子函数：beforeMount和mounted

第三阶段：组件更新阶段：当数据发送变化时，组件会进行重新渲染，所以，准确的说是，组件重新渲

染阶段。

该阶段前后的两个钩子函数：beforeUpdate和updated

第四阶段：组件销毁阶段：组件销毁。

该阶段前后的两个钩子函数：beforeDestroy和destroyed

视情况可以补充：

当使用keep-alive包裹组件时，会有组件激活和停用之说，这两个钩子函数分别是：activited和

deactivated

2、发送请求在生命周期的哪个阶段，为什么不可以是beforeMount，mounted中。

（如果组件的初始数据来自后端）发送请求建议在钩子函数created里，这个钩子函数里是最快，也能有

助于一致性。

为什么？

1）、为什么不能放在beforeCreate里？

因为：

　一般来说，数据从后端返回回来后，都会赋给vue中的属性（

data挂载的），在beforeCreate钩子函数

里，data的数据还没有挂载到vue对象本身上，所以，不能在这个钩子函数里用。而created钩子函数里，

数据已经挂载到vue对象了。2）、为什么不可以是beforeMount，mounted中

因为：

第一，在这两个钩子函数里，发送请求有点晚，会增加页面loading的时间；

第二，vue的SSR不支持beforeMount 、mounted 钩子函数，所以，放在 created 中有助于一致性

兄弟和父子组件，在不能使用vuex的情况下有多少种方案，请列举出来？

回答：

1、父子之间传值：

1）、父到子：props，子到父：$emit

2）、$ref、$parent

3）、事件总线(event-bus）

4）、集中管理（

$root）

2、兄弟之间传值：

1）、事件总线(event-bus）

2）、集中管理（

$root）

3）、先 子到父（用事件），再 父到子（用props）

v-if和v-for可以同时使用吗

回答：

可以使用，但是，在循环时，通过v-if只能拿到少部分数据时，建议不要使用。

原因： v-for比v-if优先级高，如果遍历的数组元素个数比较多，但是满足v-if条件比较少的情况下。会

浪费性能。而且，每次刷新页面时，都会执行这样性能不高的代码。

解决：可以在computed里循环数组，通过filter的方式，过滤出需要的数据。v-for直接循环计算属性的

结果（不用v-if）。而computed是有缓存的，所以，在原始数据没有变化时，不会多次过滤数据，这样，

就提高了效率。

vue-cli怎么配置跨域

回答：

使用反向代理，vue-cli3+的项目里，新建（编辑）vue.config.js文件，（增加）配置代码如下：

module.exports = {

devServer:{

//设置代理

proxy: { //代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换

'/api': { //这个是自定义的，当axios访问以/api开头的请求时，会代理到 target + /api

target: 'http://localhost:3001', //最终要访问的服务器地址

changeOrigin: true, //创建虚拟服务器

pathRewrite: {

'^/api': '' //重写接口，去掉/api， 在代理过程中是否替换掉/api/路径

}v-bind是用来干什么的

回答：

v-bind指令是把标签的属性处理成动态的。分别可以把属性名和属性值处理成vue里的属性，常间

的是属性值处理成动态的。

格式如下：

1、属性值动态绑定： v-bind:html属性="数据" 简写 :html属性="数据"`

示例：

2、 属性名动态绑定：

v-bind:[属性名]="数据"

此时，属性值也是动态的

示例：

说说对插槽的理解

回答：

1、插槽的作用：

插槽是用来处理组件的内容的。插槽决定了组件的内容放在组件模板的何处。插槽使用的是vue官方

提供的组件 <slot> 来完成的。

2、vue中的插槽分为：

1）、单个插槽

在组件中只有一个插槽时，插槽不用起名字。默认的名字是：default

示例：

}

}

}

}

<img v-bind:src="imgstr"></div>

new Vue({

data:{

imgstr:'./imgs/1.jpg'

}

})

<div v-bind:[attr]="idname" >我是div</div>

new Vue({

el: "#app",

data:{

attr:"class",

idname:"div01"

}

})

//1、定义组件let book = {

template: `

<div>

<p>我是上p</p>

<!--这是插槽，该组件的内容将会渲染在此处 -->

<slot></slot>

<p>我是下p</p>

</div>

`,

}

//2、父组件的模板

<div id="box">

<book>

<!--放在组件book标签的内容，最终会渲染在book标签的<slot>处。-->

<img src="imgs/2.jpg" />

</book>

</div>

2）、具名插槽

但组件中的插槽多于一个时，就需要给组件起名字，用名字来区分不同的插槽。用官方组件slot的

name属性给插槽起名字

格式：

<slot name="插槽的名字"></slot>

示例：

//1、组件：

let book = {

template: `

<div>

<p>我是上p</p>

<!--具名插槽，该插槽起名为s1-->

<slot name="s1"></slot>

<p>我是中p</p>

<!--具名插槽，该插槽起名为s2-->

<slot name="s2"></slot>

<p>我是下p</p>

</div>

`,

}

//2、父组件模板里：

<div id="box">

<book>

<!--以下内容插在name为s1的插槽处-->

<template v-slot:s1>

<img src="imgs/2.jpg" />

</template>

<!--以下内容插在name为s2的插槽处-->

<template v-slot:s2>

<div>我是div</div>

</template>

</book>

</div>$nextTick理解 和定时器有什么区别 都是延时执行

回答：

1、$nextTick理解：

vue更新DOM时，使用的是异步更新队列。目的是提高性能，避免无效的重复的DOM更新。即：vue

中更新数据后，并不会立即更新DOM，而是把数据引起的DOM更新放入到异步更新队列里。等待下次事

件循环（

tick），并在两个tick之间进行UI渲染。

按照这个思路，程序员就不能在更改数据后，立即获取更新后的DOM，也不知道什么时候DOM能够

更新。基于此，vue提供了$nextTick函数。程序员只需要把 ”操作更新后DOM的代码“ 放入到$nextTick

的回调函数里。由$nextTick内部，在更新完DOM后，调用回调函数。

示例：

2、$nextTick理解和定时器有什么区别

相同：都是延迟加载，都使用事件队列

不同：

1）、定时器是下一个队列的队首。

2）、 $nextTick() 是放在当前队列的最后一个。$nextTick()的回调函数执行要先于定时器。

event-bus是怎么用？

event-bus是事件总线，是借助一个全局的vue对象，来完成事件的绑定和事件的触发。

当：我们需要把A组件的数据传给B组件时，在A、B两个组件里都引入全局的vue对象。然后，在B组件里

绑定事件，在A组件里触发事件，就可以把A组件的数据传给B组件了。

示例：

this.msg = "hello"

this.$nextTick(()=>{

操作“this.msg影响的DOM”的代码。

})

//1、全局的vue对象: bus.js

export default new Vue();//vue 对象具有 $on 和 $emit 方法

//2、B组件的代码

import bus from "./bus.js"

export default {

………………

data(){

return {

bookmsg:""

}

},

created(){

// 绑定事件（用全局变量bus绑定一个事件）mounted与created的区别

回答：

mounted和created都是vue对象生命周期的钩子函数，执行时机不同。

1、created 是在 data配置项的数据挂载到vue对象本身后，会调用的钩子函数。

此时，

1）、用 this. 的方式可以拿到data里的数据。

2）、但是数据还没有渲染到模板上。所以，访问dom时，内容还是原始的模板内容。

2、mounted是在组件的模板初次渲染完毕后会调用的钩子函数。

此时，

data里的数据已经渲染到模板上了。所以，访问dom时，已经和页面上看到的效果一样了。

v-model 原理 是什么

回答：

1、v-model指令的作用

vue中的v-model指令是完成双向绑定的，用在表单元素上。双向绑定就是 M会影响V。V也会影响M。

即：能将页面上输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上

输入控件的值。

2、v-model的原理

v-model指令是一个语法糖，是属性绑定和事件的语法糖。vue会根据不同的表单元素使用不同的属性

和事件。

bus.$on("eclick",str=>{

this.bookmsg = str;

})

}

}

//3、A组件的代码

import bus from "./bus.js"

export default {

………………

data(){

return {

msg:"要传给B组件的数据"

}

},

methods:{

chuan(){

// 触发事件（用全部变量bus触发事件）

bus.$emit("eclick",this.msg);

}

}

}如下：

text 和 textarea 元素使用 value property 和 input 事件；

checkbox 和 radio 使用 checked property 和 change 事件；

select 字段将 value 作为 prop 并将 change 作为事件。

以文本框为例剖析原理，以下是代码：

而，使用v-model来完成以上功能的代码如下：

vue 的组件中的 data 配置为什么必须是函数(每个组件都是 vue 的实例)

vue 为了保证每个实例上的 data 数据的独立性，规定了必须使用函数，而不是对象。 因为使用对象的

话，每个实例（组件）上使用的 data 数据是相互影响的，这当然就不是我们想要的了。 对象是对于内存

地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。而

函数具有内部作用域，可以解决这个问题。

<!-- V -->

<div id="app">

<!--文本框使用value属性和input事件-->

<input type="text" v-bind:value="msg" @input="changeMsg" >

</div>

//M：

let vm = new Vue({

el: "#app",

data: {

msg:"hi"

},

methods: {

changeMsg(e){

this.msg = e.target.value;

}

}

})

<!-- V-->

<div id="app">

<!-- 此处不需要使用value属性和input事件，直接使用v-mdoel指令即可 -->

<input type="text" v-model="msg" >

</div>

// M:model

let vm = new Vue({

el: "#app",

data: {

msg:"hi"

}

})vue 中 computed 和 watch 的区别

1. watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个依赖型数据（依赖型数据：简

单理解即放在 data 等对象下的实例数据）发生变化的时候，所有依赖这个数据的相关数据会自动

发生变化，即自动调用相关的函数，来实现数据的变动。

当依赖的值变化时，在 watch 中，是可以做一些复杂的操作的，而 computed 中的依赖，仅仅是一

个值依赖于另一个值，是值上的依赖。

2. 应用场景：

computed：用于处理复杂的逻辑运算；一个数据受一个或多个数据影响；用来处理 watch 和

methods 无法处理的，或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的

商品数量和总金额之间的变化关系等。

　　 watch：用来处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作，或要在数据

变化时执行异步或开销较大的操作；一个数据改变影响多个数据。例如用来监控路由、inpurt 输入

框值的特殊处理等。

3. 区别：

computed

初始化显示或者相关的 data、props 等属性数据发生变化的时候调用；

计算属性不在 data 中，它是基于 data 或 props 中的数据通过计算得到的一个新值，这个新值

根据已知值的变化而变化；

在 computed 属性对象中定义计算属性的方法，和取 data 对象里的数据属性一样，以属性访问

的形式调用；

如果 computed 属性值是函数，那么默认会走 get 方法，必须要有一个返回值，函数的返回值

就是属性的属性值；

computed 属性值默认会缓存计算结果，在重复的调用中，只要依赖数据不变，直接取缓存中

的计算结果，只有依赖型数据发生改变，computed 才会重新计算；

在 computed 中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

watch

主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是

computed 和 methods 的结合体；

可以监听的数据来源：data，props，computed 内的数据；

watch 支持异步；

不支持缓存，监听的数据改变，直接会触发相应的操作；

监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新

值，旧值。

vue 的生命周期？网络请求为什么要挂载在 mounted 中？

1. vue2 的生命周期

初始化阶段：

beforeCreate

created

挂载阶段

beforeMount

mounted

更新阶段

beforeUpdate

updated

卸载阶段

beforeDestroydestroyed

缓存组件相关

activated

deactivated

处理错误相关

errorCaptured

1. vue3 的生命周期

在 vue2 的基础上新增了：

renderTracked：

跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉

你哪个操作跟踪了组件以及该操作的目标对象和键。

renderTriggered：当虚拟 DOM 重新渲染被触发时调用。和 renderTracked 类似，接收 debugger

event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

一共 13 个

1. vue3 的组合 api 的生命周期

移除了 beforeCreate 和 created，因为创建时的事件可以在 setup 里面直接调用。

其他的 11 个生命周期前面全部加上 on

比如：mounted -> onMounted, beforeDestroy -> onDeforeDestroy

2. 网络请求为什么要挂载在 mounted 中？

在 Created 生命周期里 Data 才生成，而请求返回的数据需要挂载在 data 上，所以 Created 里是可

以初始化请求的，但是 Created 的这时候 DOM 还没有初始化；Mounted 生命周期里 DOM 才初始化

渲染完成。

然而，请求是异步的，所以不会堵塞页面渲染的主线程。

所以请求放在 created 和 mounted 里面都是可行的。

如果我们的请求不需要获取/借助/依赖/改变 DOM，这时请求可以放在 Created。反之则可以放在

Mounted 里。这样做会更加的安全，也能保证页面不会闪烁。

vue 的指令，在项目中封装了那些常用指令？

在 vue 中我们可以使用 Vue.directive()方法注册全局指令。也可以只用 directives 选项注册局部指令。

输入框防抖指令 v-debounce

复制粘贴指令 v-copy

const debounce = {

inserted: function (el, binding) {

let timer;

el.addEventListener("keyup", () => {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(() => {

binding.value();

}, 1000);

});

},

};

export default debounce;

const copy = {

bind(el, { value }) {

el.$value = value;长按指令 v-longpress

el.handler = () => {

if (!el.$value) {

// 值为空的时候，给出提示。可根据项目UI仔细设计

console.log("无复制内容");

return;

}

// 动态创建 textarea 标签

const textarea = document.createElement("textarea");

// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域

textarea.readOnly = "readonly";

textarea.style.position = "absolute";

textarea.style.left = "-9999px";

// 将要 copy 的值赋给 textarea 标签的 value 属性

textarea.value = el.$value;

// 将 textarea 插入到 body 中

document.body.appendChild(textarea);

// 选中值并复制

textarea.select();

const result = document.execCommand("Copy");

if (result) {

console.log("复制成功"); // 可根据项目UI仔细设计

}

document.body.removeChild(textarea);

};

// 绑定点击事件，就是所谓的一键 copy 啦

el.addEventListener("click", el.handler);

},

// 当传进来的值更新的时候触发

componentUpdated(el, { value }) {

el.$value = value;

},

// 指令与元素解绑的时候，移除事件绑定

unbind(el) {

el.removeEventListener("click", el.handler);

},

};

export default copy;

const longpress = {

bind: function (el, binding, vNode) {

if (typeof binding.value !== "function") {

throw "callback must be a function";

}

// 定义变量

let pressTimer = null;

// 创建计时器（

2秒后执行函数 ）

let start = (e) => {

if (e.type === "click" && e.button !== 0) {

return;

}

if (pressTimer === null) {

pressTimer = setTimeout(() => {

handler();

}, 2000);

}};

// 取消计时器

let cancel = (e) => {

if (pressTimer !== null) {

clearTimeout(pressTimer);

pressTimer = null;

}

};

// 运行函数

const handler = (e) => {

binding.value(e);

};

// 添加事件监听器

el.addEventListener("mousedown", start);

el.addEventListener("touchstart", start);

// 取消计时器

el.addEventListener("click", cancel);

el.addEventListener("mouseout", cancel);

el.addEventListener("touchend", cancel);

el.addEventListener("touchcancel", cancel);

},

// 当传进来的值更新的时候触发

componentUpdated(el, { value }) {

el.$value = value;

},

// 指令与元素解绑的时候，移除事件绑定

unbind(el) {

el.removeEventListener("click", el.handler);

},

};

export default longpress;

禁止表情及特殊字符 v-emoji

let findEle = (parent, type) => {

return parent.tagName.toLowerCase() === type

? parent

: parent.querySelector(type);

};

const trigger = (el, type) => {

const e = document.createEvent("HTMLEvents");

e.initEvent(type, true, true);

el.dispatchEvent(e);

};

const emoji = {

bind: function (el, binding, vnode) {

// 正则规则可根据需求自定义

var regRule = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g;

let $inp = findEle(el, "input");

el.$inp = $inp;

$inp.handle = function () {

let val = $inp.value;

$inp.value = val.replace(regRule, "");

trigger($inp, "input");};

$inp.addEventListener("keyup", $inp.handle);

},

unbind: function (el) {

el.$inp.removeEventListener("keyup", el.$inp.handle);

},

};

export default emoji;

图片懒加载 v-LazyLoad

const LazyLoad = {

// install方法

install(Vue, options) {

const defaultSrc = options.default;

Vue.directive("lazy", {

bind(el, binding) {

LazyLoad.init(el, binding.value, defaultSrc);

},

inserted(el) {

if (IntersectionObserver) {

LazyLoad.observe(el);

} else {

LazyLoad.listenerScroll(el);

}

},

});

},

// 初始化

init(el, val, def) {

el.setAttribute("data-src", val);

el.setAttribute("src", def);

},

// 利用IntersectionObserver监听el

observe(el) {

var io = new IntersectionObserver((entries) => {

const realSrc = el.dataset.src;

if (entries[0].isIntersecting) {

if (realSrc) {

el.src = realSrc;

el.removeAttribute("data-src");

}

}

});

io.observe(el);

},

// 监听scroll事件

listenerScroll(el) {

const handler = LazyLoad.throttle(LazyLoad.load, 300);

LazyLoad.load(el);

window.addEventListener("scroll", () => {

handler(el);

});

},

// 加载真实图片

load(el) {

const windowHeight = document.documentElement.clientHeight;const elTop = el.getBoundingClientRect().top;

const elBtm = el.getBoundingClientRect().bottom;

const realSrc = el.dataset.src;

if (elTop - windowHeight < 0 && elBtm > 0) {

if (realSrc) {

el.src = realSrc;

el.removeAttribute("data-src");

}

}

},

// 节流

throttle(fn, delay) {

let timer;

let prevTime;

return function (...args) {

const currTime = Date.now();

const context = this;

if (!prevTime) prevTime = currTime;

clearTimeout(timer);

if (currTime - prevTime > delay) {

prevTime = currTime;

fn.apply(context, args);

clearTimeout(timer);

return;

}

timer = setTimeout(function () {

prevTime = Date.now();

timer = null;

fn.apply(context, args);

}, delay);

};

},

};

export default LazyLoad;

权限校验指令 v-premission

function checkArray(key) {

let arr = ["1", "2", "3", "4"];

let index = arr.indexOf(key);

if (index > -1) {

return true; // 有权限

} else {

return false; // 无权限

}

}

const permission = {

inserted: function (el, binding) {

let permission = binding.value; // 获取到 v-permission的值

if (permission) {

let hasPermission = checkArray(permission);

if (!hasPermission) {

// 没有权限 移除Dom元素

el.parentNode && el.parentNode.removeChild(el);}

}

},

};

export default permission;

实现页面水印 v-waterMarker

function addWaterMarker(str, parentNode, font, textColor) {

// 水印文字，父元素，字体，文字颜色

var can = document.createElement("canvas");

parentNode.appendChild(can);

can.width = 200;

can.height = 150;

can.style.display = "none";

var cans = can.getContext("2d");

cans.rotate((-20 * Math.PI) / 180);

cans.font = font || "16px Microsoft JhengHei";

cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";

cans.textAlign = "left";

cans.textBaseline = "Middle";

cans.fillText(str, can.width / 10, can.height / 2);

parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";

}

const waterMarker = {

bind: function (el, binding) {

addWaterMarker(

binding.value.text,

el,

binding.value.font,

binding.value.textColor

);

},

};

export default waterMarker;

拖拽指令 v-draggable

const draggable = {

inserted: function (el) {

el.style.cursor = "move";

el.onmousedown = function (e) {

let disx = e.pageX - el.offsetLeft;

let disy = e.pageY - el.offsetTop;

document.onmousemove = function (e) {

let x = e.pageX - disx;

let y = e.pageY - disy;

let maxX =

document.body.clientWidth -

parseInt(window.getComputedStyle(el).width);

let maxY =

document.body.clientHeight -

parseInt(window.getComputedStyle(el).height);

if (x < 0) {

x = 0;vue 的移动端适配怎么做的，rem 怎么用的

vue 的移动端适配我们可以参考 vant-ui 组件库给我们提供的方案。

使用 amfe-flexible(用于自动定义跟字体大小)插件和 postcss-pxtorem(用于将 px 自动转成 rem)插件

在 main.ts 里面 import "amfe-flexible"

在根目录新建 .postcssrc.js 文件

rem 是相对于跟字体的倍数，如果我们整个项目都是用 rem 作为单位，那么当我们做移动端的响应式的

时候只需要去改变跟字体的大小就能做到适配。

后台管理系统用户验证权限

1. 登录

用户填写完账号和密码后向服务端验证是否正确，登录成功后，服务端会返回一个 token（该

token 的是一个能唯一标示用户身份的一个 key），之后我们将 token 存储在本地 localstorage 之

中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录

了。

为了保证安全性，后台所有 token 有效期(Expires/Max-Age)都是 Session，就是当浏览器关闭了就丢

失了。重新打开浏览器都需要重新登录验证，后端也会在每周固定一个时间点重新刷新 token，让

后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。

2. 拦截路由进行判断

页面会先从 localstorage 中查看是否存有 token，没有，就走一遍上一部分的流程重新登录，如果

有 token,就会把这个 token 返给后端去拉取 user_info，保证用户信息是最新的。 当然如果是做了

单点登录得的的话，用户信息存储在本地也是可以的。当你一台电脑登录时，另一台会被提下

线，所以总会重新登录获取最新的内容。

} else if (x > maxX) {

x = maxX;

}

if (y < 0) {

y = 0;

} else if (y > maxY) {

y = maxY;

}

el.style.left = x + "px";

el.style.top = y + "px";

};

document.onmouseup = function () {

document.onmousemove = document.onmouseup = null;

};

};

},

};

export default draggable;

module.exports = {

plugins: {

"postcss-pxtorem": {

rootValue: 37.5,

propList: ["*"],

},

},

};3. 权限控制

前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户

的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过 router.addRoutes 动态挂载路由。

但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证

是逃不掉的。

前端控制页面级的权限，不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许

按钮级别的权限控制)，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一

个后台的请求不管是 get 还是 post 都会让前端在请求 header 里面携带用户的 token，后端会根据

该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该

状态码，做出相对应的操作。

4. 利用 vuex 管理路由表，根据 vuex 中可访问的路由渲染侧边栏组件。

创建 vue 实例的时候将 vue-router 挂载，但这个时候 vue-router 挂载一些登录或者不用权限的公用

的页面。

当用户登录后，获取用 role，将 role 和路由表每个页面的需要的权限作比较，生成最终用户可访问

的路由表。

调用 router.addRoutes(store.getters.addRouters)添加用户可访问的路由。

使用 vuex 管理路由表，根据 vuex 中可访问的路由渲染侧边栏组件。

vuex 做数据请求刷新页面，数据可能会发生丢失这个问题怎么解决

因为 store 里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载 vue 实例，store 里面的数据

就会被重新赋值初始化。

所以我们可以在修改 store 的数据同时将数据再存一份到本地存储(localStorage 或者 sessionStorage),本地

存储的内容是存在浏览器里面的，不会因为刷新而丢失。

我们也可以用过比如 vuex-persistedstate 这样的第三方包来帮助我们做 vuex 的持久化数据。

vue2 和 vue3 两者的具体的区别有哪些，请一一例举出来

1. 源码使用 ts 重写

现如今 typescript 异常火爆，它的崛起是有原因的，因为对于规模很大的项目，没有类型声明，后

期维护和代码的阅读都是头疼的事情，所以广大码农迫切的需要 vue 能完美支持 ts。

vue2 用的是 Facebook 的 Flow 做类型检查，但是因为某些情况下推断有问题，所以 vue3 使用

typescript 进行了源码的重写。一个是为了更好的类型检查，另一个是拥抱 ts。

2. 使用 proxy 代替 defineProperty

我们知道 vue2.x 双向绑定的核心是 Object.defineProperty()，所以导致 vue 对数组对象的深层监听

无法实现。

所以 vue3 使用 proxy 对双向绑定进行了重写。Proxy 可以对整体进行监听，不需要关心里面有什么

属性，而且 Proxy 的配置项有 13 种，可以做更细致的事情，这是之前的 defineProperty 无法达到

的。

3. Diff 算法的提升

vue3 在 vue2 的 diff 算法的基础上增加了静态标记，元素提升和事件缓存等优化。使得速度更快。

4. 打包体积变化

vue2 官方说的运行时打包师 23k，但这只是没安装依赖的时候，随着依赖包和框架特性的增多，

有时候不必要的，未使用的代码文件都被打包了进去，所以后期项目大了，打包文件会特别多还

很大。

在 Vue 3 中，我们通过将大多数全局 API 和内部帮助程序移动到 Javascript 的 module.exports 属性

上实现这一点。这允许现代模式下的 module bundler 能够静态地分析模块依赖关系，并删除与未

使用的 module.exports 属性相关的代码。模板编译器还生成了对树抖动友好的代码，只有在模板

中实际使用某个特性时，该代码才导入该特性的帮助程序。

尽管增加了许多新特性，但 Vue 3 被压缩后的基线大小约为 10 KB，不到 Vue 2 的一半。

5. 其他 Api 和功能的改动Global API

模板指令

组件

渲染函数

vue-cli 从 v4.5.0 开始提供 Vue 3 预设

Vue Router 4.0 提供了 Vue 3 支持，并有许多突破性的变化

Vuex 4.0 提供了 Vue 3 支持，其 API 与 2.x 基本相同

1. 组件基本结构

在创建组件的时候我们不必在写唯一的根元素。移除了 vue2 中的 filters。

1. 生命周期的区别

新增了 renderTracked 和 renderTriggered 两个生命周期。

1. 增加了组合 api

我们可以使用 setup 函数来使用类似 react 的自定义 hooks 的功能，主要解决逻辑关注点分离的问题。

vue 操作虚拟 DOM 有什么优异的地方？他不是还多做了一层虚拟 DOM，为

什么比原生操作 DOM 还快

我们有必要先了解下模板转换成视图的过程整个过程：

Vue.js 通过编译将 template 模板转换成渲染函数(render ) ，执行渲染函数就可以得到一个虚拟节点

树。

在对 Model 进行操作的时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的

update 来修改视图。这个过程主要是将新旧虚拟节点进行差异对比，然后根据对比结果进行 DOM

操作来更新视图。

简单点讲，在 Vue 的底层实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合 Vue 自带的响应系统，在

状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应到 DOM 操作上。

那么 vue 操作虚拟 DOM 有什么优异的地方呢？

具备跨平台的优势

由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能

力，比如说浏览器平台、Weex、Node 等。

操作 DOM 慢，js 运行效率高。我们可以将 DOM 对比操作放在 JS 层，提高效率。

因为 DOM 操作的执行速度远不如 Javascript 的运算速度快，因此，把大量的 DOM 操作搬运到

Javascript 中，运用 patching 算法来计算出真正需要更新的节点，最大限度地减少 DOM 操作，从而

显著提高性能。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，

我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。

CPU（

JS）只操作内存（

Virtual DOM），最后的时候再把变更写入硬盘（

DOM）

提升渲染性能

Virtual DOM 的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

为了实现高效的 DOM 操作，一套高效的虚拟 DOM diff 算法显得很有必要。我们通过 patch 的核心—-

diff 算法，找出本次 DOM 需要更新的节点来更新，其他的不更新。比如修改某个 model 100 次，从

1 加到 100，那么有了 Virtual DOM 的缓存之后，只会把最后一次修改 patch 到 view 上。那 diff 算法

的实现过程是怎样的？

那么为什么比原生操作 DOM 还快呢？

首先我们每次操作 dom 的时候，都会去执行浏览器的那 5 个步骤，尤其是当大量循环的时候，每次循环

完都不知道后面还要不要修改，所以每次都要去重复这个过程，引发不必要的渲染。

但是在实际开发过程中，我们会发现虚拟 dom 并没有比真实 dom 更快。这个问题尤雨溪在知乎上面有

过回答：

这是一个性能 vs. 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作，让你用更声明式的方式

来描述你的目的，从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快，因为

框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。针对任何一个

benchmark，我都可以写出比任何框架更快的手动优化，但是那有什么意义呢？在构建一个实际应用的

时候，你难道为每一个地方都去做手动优化吗？出于可维护性的考虑，这显然不可能。框架给你的保证

是，你在不需要手动优化的情况下，我依然可以给你提供过得去的性能。

token 过期你是如何来进行处理，有没有弄过 token 续期

在开发中，我们经常会遇到使用 token，token 的作用是要验证用户是否处于登录状态，所以要请求一些

只有登录状态才能查看的资源的时候，我们需要携带 token。

一般的后端接口设置的 token 是有时效的，超时后就会失效，失效之后的处理策略一般会做两种处理:

一种是直接跳转到登录页面，重新登录。

另外一种如果返回 token 失效的信息，自动去刷新 token，然后继续完成未完成的请求操作。

vue底层实现原理

使用 Object.defineProperty 劫持 data上的数据。

Vue2.0通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个

setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

Vue的生命周期，created与mounted的区别

1、created

表示组件实例已经完全创建，data数据已经被 Object.defineProperty 劫持完成，属性也绑定成功，但真

实dom还没有生成，$el还不可用。

2、mounted

el选项所对应的视图节点已经被新创建的 vm.$el 替换，并挂载到实例上去了。此时响应式数据都已经完

成了渲染。

用vue写了商城，从列表页点进详情页，从详情页退出来的时候，怎么保持

进入详情页之前的页面卷动值。

使用 对列表页面进行包裹，被包裹的列表页面就有了activated、deactivated这两个生命周期。

在离开列表页面时，在deactivated中记录页面的滚动条位置。

再次进入列表页面时，在activated中使用 this.$el.scrollTop 把页面滚动到离开时所记录的位置。说说你对vue的理解

vue是数据驱动的MVVM框架，相比传统的DOM库，vue有一层虚拟DOM。每当数据发生更新时，会

触发虚拟DOM进行diff运算，找出最小的变化节点，大大地节省了DOM操作性能。

vue是组件化的，在单页面应用程序中，每一个组件相当于是一块积木，搭建起庞大的应用系统。

组件，可以理解成更大粒度的“HTML元素”，有利于快速开发、组件的高效复用。

vue有一整套指令，大大地降低了开发者的开发难度，提升了开发效率。

虽然vue有诸多优点，但仍然有一些缺陷，比如复杂的业务页面通常过长，data、methods、

computed、watch对应的数据和逻辑交织在一起，难以维护。

说说对虚拟DOM的理解

在vue中，虚拟DOM本质上就是一个固定格式的JSON数据，它用于描述真实的DOM结构，并使用各

种不同flag标记出动态的DOM节点。

虚拟DOM数据保存在应用程序对应的内存结构中，拥有更快的数据交换速度。

每当有数据发生变化时，就会生成新的虚拟DOM，进一步发生diff运算，找出最小脏节点，减少不

必要的DOM开销，这也是vue拥有更好的性能的根本原因。

说说provide的用法

在父级组件中，使用provide选项向vue组件树中“提供数据”，其语法是：provide:{a: 1}

在后代子级组件中，使用 inject选项从vue组件中“取出数据”，其语法是：inject: ['a']

说一下element ui遇到过的坑

1. 表单设置触发事件为blur，但是ctrl+A全选以后再删除时又触发了change事件，并提示一个原始报

错

解决方案：trigger设置成 trigger: ['blur', 'change']

2. 使用el-dialog 遮罩层把显示内容遮住了

原因：

Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙

板遮住的情况。

解决方法： v-bind:modal-append-to-body="false"

3. 使用el-select 不能继承父元素的宽度

原因：el-select 本身是 inline-block

解决办法：手动设置el-select的宽度

怎么修改element ui动态组件的样式

要修改elementUI组件的样式，可以采用以下两种方式

1. 全局样式

通过选择权重覆盖elementUI组件的样式，如修改复选框为圆角：

<el-select style="width:100%"></el-select>

<style>

.edit-item .el-checkbox__inner {

border-radius: 50%;

}

</style>但这种方式为全局样式，会影响页面中所有复选框，如果不希望影响其它页面的样式，可以采用

第二中方式

2. 局部样式

但如果仅仅是设置了scoped属性，样式无法生效，原因是以上样式会被编译成属性选择器，而

elementUI组件内部的结构却无法添加该html属性，以上样式被编译成如下代码：

解决方案也很简单，只需在选择器中要添加 >>> 即可

如果是sass或less编写的样式，还可以使用 /deep/

以上写法样式都会编译成以下样式：

所以elementUI中的样式就能成功覆盖

vue和react中的key值主要用来干什么

key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用，vue和react都是采用diff算法来对比

新旧虚拟节点，而key的作用是为了在执行 diff算法 的时候，更快更准确地找到对应的虚拟节点，从而提

高diff速度。

route和router区别

route 和 router 是vue-router中经常会操作的两个对象， route 表示当前的路由信息对象，包含了

当前 URL 解析得到的信息，包含当前的路径、参数、query对象等，一般用于获取跳转时传入的参数。

router 对象是全局路由的实例，是router构造方法的实例，一般用户路由跳转，如

router.push() 、 router.replace() 等方法

<style scoped>

.edit-item .el-checkbox__inner {

border-radius: 50%;

}

</style>

.edit-item[data-v-6558bc58] .el-checkbox__inner[data-v-6558bc58] {

border-radius: 50%;

}

<style scoped>

.edit-item >>> .el-checkbox__inner {

border-radius: 50%;

}

</style>

<style scoped lang="scss">

.edit-item /deep/ .el-checkbox__inner {

border-radius: 50%;

}

</style>

.edit-item[data-v-6558bc58] .el-checkbox__inner{}vue和react相对于传统的有什么好处，性能优点

1. 组件化开发，开发效率更高

React与Vue都鼓励使用组件化开发。这本质上是建议你将你的应用分拆成一个个功能明确的

模块，每个模块之间可以通过特定的方式进行关联。这样可以更好的管理功能模块与复用，

在团队项目中也能更好的分工协作

2. VirtualDOM，性能更高

对真实DOM的操作很慢，所以Vue和React都实现了虚拟DOM，用户对数据的修改首先反映到

虚拟DOM上，而不是直接操作真实DOM，然后在虚拟DOM环节进行优化，比如只修改差异

项，对虚拟 DOM 进行频繁修改时进行合并，然后一次性修改真实 DOM 中需要改的部分，最

后在真实 DOM 中进行排版与重绘，减少过多DOM节点排版与重绘损耗等

3. 数据和结构的分离

4. 双向数据绑定

Vue可以通过v-model指令实现，react可通过单向绑定+事件来实现

5. 强大的周边生态

Vue和React都有着强大的生态，比如路由、状态管理、脚手架等，用户可以根据需求自行选

择，不需要重复造轮子

虚拟DOM实现原理

我们先来看看浏览器渲染一个页面的过和，大概需要以下5个步骤

1. 解析HTML元素，构建DOM树

2. 解析CSS，生成页面CSS规则树（

Style Rules）

3. 将DOM树和CSS规则树进行关联，生成render树

4. 布局（

layout/reflow）：浏览器设定Render树中的每个节点在屏幕上的位置与尺寸

5. 绘制Render树：绘制页面像素信息到屏幕上

众所周知，一个页面在浏览器中最大的开销就是DOM节点操作，页面的性能问题大多数是DOM操作引起

的，当我们用原生js 或jquery这样的库去操作DOM时，浏览器会从构建DOM树开始执行完以上整个流程，

所以频繁操作DOM会引起不需要的计算、重排与重绘，从而导致页面卡顿，影响用户体验

所以减少DOM的操作能达到性能优化的目的，事实上，虚拟DOM就是这么做的,虚拟DOM（

VirtualDOM）

的实现原理主要包括以下 3 部分：

1. 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象

2. diff 算法 — 比较新旧两个虚拟DOM，得到差异对象

3. pach 算法 — 将差异对象应用到真实 DOM 树

Virtual DOM 本质上就是一个javascript对象，数据的修改会生成一个新的虚拟DOM（一个新的javascript对

象），然后与旧的虚拟DOM进行对比，得到两个对象的差异项，最后只更新差异对象中的内容到真实

DOM，这样能做到最少限度地修改真实DOM，从而实现性能优化如何实现角色权限分配

在开发中后台应用过程中或多或少都会涉及到一个问题：权限，简单地说就是让不同的用户在系统中拥

有不同的操作能力。

但在实际应用中我们一般不直接将权限赋予在用户身上，因为这样操作对有大量用户的系统来说过于繁

琐，所以我们一般基于RBAC（

Role-Based Access Control）权限模型，引入角色的概念，通过角色的媒

介过渡，先将权限赋予在角色上，再关联相应的用户，对应的用户就继承了角色的权限

用户与角色，角色与权限都是多对多的关系

引入角色媒介的优点：

1. 实现了用户与权限的解耦

2. 提高了权限配置的效率

3. 降低了后期维护的成本

双向数据绑定和单向数据流的优缺点

所谓数据绑定，就是指 View 层和 Model 层之间的映射关系。

单向数据绑定： Model 的更新会触发 View 的更新，而 View 的更新不会触发 Model 的更新，它

们的作用是单向的。

优点：所有状态变化都可以被记录、跟踪，状态变化通过手动调用触发，源头易追溯。

缺点：会有很多类似的样板代码，代码量会相应的上升。

双向数据绑定： Model 的更新会触发 View 的更新， View 的更新也会触发 Model 的更新，它们

的作用是相互的。

优点：在操作表单时使用 v-model 方便简单，可以省略繁琐或重复的 onChange 事件去处理

每个表单数据的变化（减少代码量）。

缺点：属于暗箱操作，无法很好的追踪双向绑定的数据的变化。

Vue是如何实现双向绑定的?

Vue的双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的 要实现这种双向数据绑定，必要的

条件有：

1. 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通

知订阅者

2. 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，

以及绑定相应的更新函数

3. 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执

行指令绑定的相应回调函数，从而更新视图

4. MVVM入口函数，整合以上三者

补充回答

在new Vue的时候，在 Observer 中通过 Object.defineProperty() 达到数据劫持，代理所有数据的

getter 和 setter 属性，在每次触发 setter 的时候，都会通过 Dep 来通知 Watcher，Watcher 作为

Observer 数据监听器与 Compile 模板解析器之间的桥梁，当 Observer 监听到数据发生改变的时候，

通过 Updater 来通知 Compile 更新视图，而 Compile 通过 Watcher 订阅对应数据，绑定更新函数，通过Dep 来添加订阅者，达到双向绑定。

Proxy与Object.defineProperty的优劣对比?

Proxy的优势如下

Proxy可以直接监听整个对象而非属性。

Proxy可以直接监听数组的变化。

Proxy有13中拦截方法，如 ownKeys、deleteProperty、has 等是 Object.defineProperty 不

具备的。

Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而 Object.defineProperty 只

能遍历对象属性直接修改;

Proxy做为新标准将受到浏览器产商重点持续的性能优化,也就是传说中的新标准的性能红利。

Object.defineProperty 的优势如下

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平。

Object.defineProperty 不足在于：

Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

Object.defineProperty 不能监听数组。是通过重写数据的那7个可以改变数据的方法来对数组

进行监听的。

Object.defineProperty 也不能对 es6 新产生的 Map , Set 这些数据结构做出监听。

Object.defineProperty 也不能监听新增和删除操作，通过 Vue.set() 和 Vue.delete 来实

现响应式的。

你是如何理解Vue的响应式系统的?

就是能够自动追踪数据的变化，而不必手动触发视图更新。Vue2.X通过Object.defineProperty()做数据劫

持，而Vue3通过Proxy做数据代理，从而捕捉到对数据的get和set。

什么叫数据响应式？

简单说就是用户更改数据(Data)时，视图可以自动刷新，页面UI能够响应数据变化。

为什么要了解Vue数据响应式？

因为这是Vue的立身之本呀，连尤雨溪都在给放文档上这样说，“Vue 最独特的特性之一，是其非侵入性

的响应式系统。”

Vue就是通过getter 和setter来对数据进行操作，通过get()和set()函数可以生成一个虚拟属性，来直接调用

函数操作数据。这一步是被封装起来的，我们是看不到的。

此外，还需要一个重要的媒介API，那就是Object.defineProperty，因为对象被定义完成后，想要更改或

添加属性（像是get和set这样的属性），只能通过这个Object.defineProperty来添加。接着需要实现对数

据属性的读写进行监控。能够监控就意味着能让vm（一般生成的实例）能够知道数据有变化，从而触发

render(data)函数，页面UI就会做出响应。

既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行

diff检测差异?

1.减少对真实DOM的操作

Diff 算法探讨的就是虚拟 DOM 树发生变化后，生成 DOM 树更新补丁的方式。对比新旧两株虚拟 DOM 树

的变更差异，将更新补丁作用于真实 DOM，以最小成本完成视图更新。

具体流程：1. 真实 DOM 与虚拟 DOM 之间存在一个映射关系。这个映射关系依靠初始化时的 JSX 建立完成；

2. 当虚拟 DOM 发生变化后，就会根据差距计算生成 patch，这个 patch 是一个结构化的数据，内容包

含了增加、更新、移除等；

3. 最后再根据 patch 去更新真实的 DOM，反馈到用户的界面上。

这样一个生成补丁、更新差异的过程统称为 diff 算法。

这里涉及3个要点：

1. 更新时机：更新发生在setState、Hooks 调用等操作以后

2. 遍历算法：采用深度优先遍历，从根节点出发，沿着左子树方向进行纵向遍历，直到找到叶子节

点为止。然后回溯到前一个节点，进行右子树节点的遍历，直到遍历完所有可达节点

3. 优化策略：树、组件及元素三个层面进行复杂度的优化

4.

1. 忽略节点跨层级操作场景，提升比对效率。

1.

2.

这一策略需要进行树比对，即对树进行分层比较。树比对的处理手法是非常“暴力”

的，即两棵树只对同一层次的节点进行比较，如果发现节点已经不存在了，则该节点

及其子节点会被完全删除掉，不会用于进一步的比较，这就提升了比对效率

3. 如果组件的 class 一致，则默认为相似的树结构，否则默认为不同的树结构

1.

4.

在组件比对的过程中：如果组件是同一类型则进行树比对；如果不是则直接放入补丁

中。只要父组件类型不同，就会被重新渲染。这也就是为什么

shouldComponentUpdate、PureComponent 及 React.memo 可以提高性能的原因

5. 同一层级的子节点，可以通过标记 key 的方式进行列表对比

1.

6.

元素比对主要发生在同层级中，通过标记节点操作生成补丁。节点操作包含了插入、

移动、删除等。其中节点重新排序同时涉及插入、移动、删除三个操作，所以效率消

耗最大，此时策略三起到了至关重要的作用。通过标记 key 的方式，React 可以直接

移动 DOM 节点，降低内耗

通过diff算法能准确的获取到具体的节点 进行针对操作！！！

Vue为什么没有类似于React中shouldComponentUpdate的生命周期？

因为 Vue 的响应式系统已经在初次渲染时收集了渲染依赖的数据项，通过自动的方式就能够得到相当不

错的性能。不过，在一些场景下，手动控制刷新检查还是能够进一步提升渲染性能的

vue 的机制，其实就是个依赖关系管理机制。不管是计算属性，watcher，以及 renderer，站在外部看，

模型都是一样的，即初始化的时候通过一些方法分析出来这个模块依赖谁，等被依赖的数据更新了，这

些模块就重新运算一遍产出物（实际上不尽然，比如计算属性有惰性机制）。

具体到 renderer，哪些数据的变更会引起 dom 变更，在模板编译的时候已经确定了，并且写死在生成的

代码里了。

而 react 是没有这种自动机制的，它去执行 render 唯一的原因就是你主动让他 render。那你什么时候让

它 render 呢？工程上一般是使用一个数据流工具，数据有变化的时候发出一个事件，一股脑把数据推过

来，不区分哪个字段有变更（你区分了也没用，renderer 根本不认）。如果这个数据流模型是多个组件

共用的，那必然是在 render 之前有个 hook 给我们个机会告诉组件“这次没你的事儿”，有利于性能优

化。

那么，我们有没有可能不增加代码静态分析环节，搞清楚 react renderer 到底依赖哪些数据，继而把这个

判断自动做掉呢？依我看不太可能，因为我们不能保证运行期跑一遍 render，它就会一次性访问它所有

可能访问的数据。Vue中的key到底有什么用？

1、key的作用主要是为了搞笑的更新虚拟dom，其原理是vue在patch过程中通过key可以精准判断两个节

点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少dom操作量，提高性

能。

2、另外，若不设置key还可能在列表更新时候引发一些隐藏的bug。

3、vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它

们，否则vue只会替换其内部属性而不会触发过渡效果。

不能用index做key

看了上面的介绍其实也很容易明白为什么不能用index作为key。

1、影响性能：当用index作为key的时候，删除节点后面的所有节点都会导致重新渲染，因为index变化

了，可以也就变化了

有人说，当你的列表数据没有变化的时候可以用index作为key。也就是说列表不会触发更新元素，只有

静态展示。这种说法你怎么看呢？

之所以说到这个问题，是在vue官方群里面一群人应为这个问题讨论半天。我弱弱回复一句，任何情况下

都不要用index作为key。结果遭到炮轰，哎！（除非前端写死的list，且无操作不会引起key变化，只要是

后端数据，前端怎么能保证数据不变呢）。

关于这个问题，我有这样三点想法：

1、代码的规范性

2、类比typescript，为什么变量要加类型，除了规范，也方便定位错误

3、列表的顺序稳定其实是难以保证的

vue项目中用jsx语法

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，

JSX就当HTML解析，遇到{就当JavaScript解析.

我为什么要在vue中用JSX?

是使用的的模板语法，Vue的模板实际上就是编译成了 render 函数，同样支持 JSX 语法。在 Vue 官网

中，提供 createElement 函数中使用模板中的功能。

但是极少数的 VUE项目用JSX语法 JSX语法 根植在react上面 在vue上还是 template舒服！

<script>

export default {

name: "item",

props:{

id:{

type:Number,

default:1

}

},

render(){

const hText=`

<h${this.id}>${this.$slots.default[0].text}</h${this.id}>

`

return <div domPropsInnerHTML={hText}></div>

}

}

</script>vue的$set是什么？

我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时

候并不会自动更新到视图上去；

当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会

触发视图更新。例如这个代码：

运行结果：

为什么会这样呢？当去查对应文档时，你会发现响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作

为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter,如上示例，将

data在控制台打印出来会发现：

在age及name都有get和set方法,但是在sex里面并没有这两个方法，因此，设置了sex值后vue并不会自动

更新视图；

解决方法：

<div id="app">

姓名：{{ name }}<br>

年龄：{{age}}<br>

性别：{{sex}}<br>

说明：{{info.content}}

</div>

<script>

var data = {

name: "张三",

age: '3',

info: {

content: 'my name is test'

}

}

var vm = new Vue({

el:'#app',

data: data

});

data.sex = '男'；

</script>

姓名：张三

年龄：3

性别：

说明：my name is test总结：

由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加

getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应

的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出现数

据变化，页面不变的情况。此时需要用到$set。

语法：

this.$set(Object, key, value)

vue里绑定了一个空对象,往空对象里面添加属性，在哪个函数周期里面可

以实现

需要在created里面才可以，如下代码：

Vue的通信方式有什么

vue 中8种常规的通信方案

1. 通过 props 传递

2. 通过 $emit 触发自定义事件

3. 使用 ref

4. EventBus

5. parent或root

6. attrs 与 listeners

7. Provide 与 Inject

8. Vuex

props传递数据

new Vue({

el:'#app',

data: data,

created: function(){

Vue.set(data,'sex', '男'); // 等同于this.$set(data,'sex','男')

}

});

<div>{{user}}</div>

data () {

return {

user: { },

}

},

created () {

this.user.a = 1 // 这样界面就会显示 {a:1}

},适用场景：父组件传递数据给子组件

子组件设置 props 属性，定义接收父组件传递过来的参数

父组件在使用子组件标签中通过字面量来传递值

Children.vue

Father.vue

$emit 触发自定义事件

适用场景：子组件传递数据给父组件

子组件通过 $emit触发 自定义事件， $emit 第二个参数为传递的数值

父组件绑定监听器获取到子组件传递过来的参数

Children.vue

Father.vue

ref

父组件在使用子组件的时候设置 ref

父组件通过设置子组件 ref 来获取数据

父组件

props:{

// 字符串形式

name:String // 接收的类型参数

// 对象形式

age:{

type:Number, // 接收的类型为数值

defaule:18, // 默认值为18

require:true // age属性必须传递

}

}

<Children name:"jack" age=18 />

this.$emit('add', good)

<Children @add="cartAdd($event)" />

<Children ref="foo" />

this.$refs.foo // 获取子组件实例，通过子组件实例我们就能拿到对应的数据EventBus

使用场景：兄弟组件传值

创建一个中央时间总线 EventBus

兄弟组件通过 $emit 触发自定义事件， $emit 第二个参数为传递的数值

另一个兄弟组件通过 $on 监听自定义事件

Bus.js

Children1.vue

Children2.vue

Parent或 root

通过共同祖辈 $parent 或者 $root 搭建通信侨联

兄弟组件

另一个兄弟组件

attrs与 listeners

适用场景：祖先传递数据给子孙

设置批量向下传属性 $attrs 和 $listeners

包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。

可以通过 v-bind="$attrs" 传⼊内部组件

// 创建一个中央时间总线类

class Bus {

constructor() {

this.callbacks = {}; // 存放事件的名字

}

$on(name, fn) {

this.callbacks[name] = this.callbacks[name] || [];

this.callbacks[name].push(fn);

}

$emit(name, args) {

if (this.callbacks[name]) {

this.callbacks[name].forEach((cb) => cb(args));

}

}

}

// main.js

Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上

// 另一种方式

Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

this.$bus.$emit('foo')

this.$bus.$on('foo', this.handle)

this.$parent.on('add',this.add)

this.$parent.emit('add')provide 与 inject

在祖先组件定义 provide 属性，返回传递的值

在后代组件通过 inject 接收组件传递过来的值

祖先组件

后代组件

vuex

适用场景: 复杂关系的组件数据传递

Vuex 作用相当于一个用来存储共享变量的容器

// child：并未在props中声明foo

<p>{{$attrs.foo}}</p>

// parent

<HelloWorld foo="foo"/>

// 给Grandson隔代传值，communication/index.vue

<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>

// Child2做展开

<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>

// Grandson使⽤

<div @click="$emit('some-event', 'msg from grandson')">

{{msg}}

</div>

provide(){

return {

foo:'foo'

}

}

inject:['foo'] // 获取到祖先组件传递过来的值state 用来存放共享变量的地方

getter ，可以增加一个 getter 派生状态，(相当于 store 中的计算属性），用来获得共享变量

的值

mutations 用来存放修改 state 的方法。

actions 也是用来存放修改state的方法，不过 action 是在 mutations 的基础上进行。常用来做

一些异步操作

小结

父子关系的组件数据传递选择 props 与 $emit 进行传递，也可选择 ref

兄弟关系的组件数据传递可选择 $bus ，其次可以选择 $parent 进行传递

祖先与后代组件数据传递可选择 attrs 与 listeners 或者 Provide 与 Inject

复杂关系的组件数据传递可以通过 vuex 存放共享的变量

Vue的生命周期里什么时候拿DOM结构比较好

Vue实例从创建到销毁的过程就是Vue的生命周期。

也就是说：开始创建->初始化实例->编译模板->挂载dom->数据更新和重新渲染虚拟dom->最后销毁。这

一系列的过程就是Vue的生命周期。

beforeCreate：vue实例的挂载元素el和数据对象data还没有初始化，还是一个undefined的一个状态。

created：这个时候Vue实例的数据对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂

载dom

beforeMount：在这里Vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点。

mounted：Vue实例已经挂载在真实的dom节点上了，可以对dom进行操作来获取dom节点。

beforeUpdate：响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的

dom。updated：虚拟dom重新渲染和打补丁之后调用，组成新的dom已经更新，避免在这个钩子函数种操作数

据，防止死循环。

beforeDestory：Vue实例在销毁之前调用，在这里可以使用，通过this也能访问到实例，可以在这里对一

些不用的定时器进行清除，解绑事件。

destoryed：vue销毁之后调用，调用之后所有的事件监听都会被移除，所有的实例都会被销毁。

beforeMount与mounted的区别

beforeMount：在这里Vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点。

挂载前 ：完成模板编译，虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会

触发updated。数据还没有更新到页面上去。当编译完成之后，只是在内存中已经有了编译好的页面，但

并未渲染。

mounted：Vue实例已经挂载在真实的dom节点上了，可以对dom进行操作来获取dom节点。

挂载完成 ：

将编译好的模板挂载到页面 (虚拟DOM挂载) ，可以在这进行异步请求以及DOM节点的访

问，在vue用$ref操作

跳转下一个页面，在返回，怎么保持页面的状态不变

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面

进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索

的结果列表,这时候就需要用到vue的keep-alive技术了.

keep-alive 简介

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

实际项目中,需要配合vue-router共同使用

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被

缓存：

如果只想 router-view 里面某个组件被缓存，怎么办？

增加 router.meta 属性

<keep-alive>

<!-- 所有路径匹配到的视图组件都会被缓存！ -->

<router-view>

</router-view>

</keep-alive>

// routes 配置

export default [

{

path: '/',

name: 'home',

component: Home,

meta: {

keepAlive: true // 需要被缓存

}

}, {

path: '/:id',

name: 'edit',

component: Edit,

meta: {Vue的性能优化有哪些方法

1、路由懒加载

2、keep-alive缓存页面

3、使用v-show复用DOM

4、v-for遍历避免同时使用v-if （使用computed属性过滤需要显示的数据项 ）

5、长列表性能优化

(1)如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应话, 使用object.freeze(data)

(2)如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容，参考vue-virtual-scroller、vue-

virtual-scroll-list

6、事件的销毁

vue组件销毁时，会自动解绑它的全部指令及事件监听，但是仅限于组件本身的限制

7、图片懒加载

8、第三方插件按需引入

像element-ui这样的第三方组件库可以按需引入避免体积太大。

9、无状态的组件标记为函数式组件

keepAlive: false // 不需要被缓存

}

}

]

<!-- 这里是会被缓存的视图组件，比如 Home！ -->

<keep-alive>

<router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

<!-- 这里是不被缓存的视图组件，比如 Edit！ -->

<router-view v-if="!$route.meta.keepAlive"></router-view>

<template functional>

<div class='cell'>

<div v-if="props.value" class="on"></div>

<section v-else class="off"></section>

</div>

</template>

<script>

export defalut {

props: ['value']

}

</script>10、SSR

vue项目怎么进行seo的优化

Vue的单页面模式进行开发的项目，网站信息搜索引擎无法做索引,导入收录只有是首页！

搜索引擎无法进行索引的核心原因就是，其在爬取网站数据的时候，是不会执行其中包含的JS过程的；

而采用Vue的方式开发的应用，其数据都是来源于axios或者其它的ajax方法获取的数据！也就是说，想要

友好的支持搜索引擎，就必须采用服务器端渲染的相关技术，比如JSP，就是一个典型的服务器端渲染技

术，用户请求一个地址然后展示到浏览器中的数据都是服务器端处理好的，浏览器只管展示；又比如静

态页面，所有页面都是预先编写或生成好的，浏览器将请求拿到的数据直接展现即可。

所以为了实现seo的优化，我们可以采用比较成熟的服务端SSR的框架Nuxt实现。

element-ui要改变默认样式有几种方法

当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以

下三种方法修改样式，并且不影响全局样式.

在样式外新增一个样式标签不添加scoped

使用deep样式穿透

使用>>>穿透

<style>

.my{

margin: 20px;

}

.my .el-input__inner{

border-radius: 15px;/* 这个样式起效果 */

}

</style>

<style scoped>

.my .el-input__inner{

border-radius: 30px; /* 这个样式不起效果 */

}

</style>

<style scoped>

.my .el-input__inner{

border-radius: 30px;/* 这个不起作用 */

}

.my /deep/ .el-input__inner{

border-radius: 30px;/* 这个起作用 */

}

</style>

<style scoped>

.my .el-input__inner{

border-radius: 30px;/* 这个不起作用 */

}

.my >>> .el-input__inner{

border-radius: 30px;/* 这些起作用 */

border: 1px solid #eceef2;

outline: 0;

}

</style>用vue开发项目和原生开发项目相比有什么好处

? 首先vue和原生js都可以用来开发web项目,但越来越多的项目在立项及技术选型时选择使用vue,主要是

有以下优势.

1. 控件跟数据自动绑定，可以直接使用data里面的数据值来提交表单，而不需要再使用

$("#myid").val()那一套方法来获取控件的值，对控件赋值也方便很多，只需要改变data的值，控件

就会自动改变值。将复杂的界面操作，转化为对数据进行操作.

2. 页面参数传递和页面状态管理.

页面传值对于vue来说，可供选择的方法非常多。比如使用子组件实现，通过对props属性传值；

也可以使用页面url参数的方法传值；或使用vuex全局状态管理的方法页面传值等等。而原生开发

的时候，在页面有多个参数的时候，页面传值和初始化，要复杂很多。而vue直接将参数保存在对

象里面，直接给子组件的属性或vuex存储一个对象就行了，比如 , 这样就可以将userinfo传到自定

义组件。

3. 模块化开发、无刷新保留场景参数更新

比如一个列表页面里面有添加功能，有修改功能，这时候我们可以通过引用子组件的形式，当子

组件内容更新的时候，修改主组件的数据，比如修改了一条数据后，我们需要列表页同时刷新，

但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个，需要写很多业

务逻辑保存上一个页面的搜索条件和页码这些参数，但假如你用vue开发，将变得非常简单.

4. 代码的可阅读性

vue天生具有组件化开发的能力，因此不同的功能基本都是写在不同的模块里面，因此代码的可阅

读性非常高。当一个新手接手一个旧项目的时候，基本上可以做到一天就能定位到要修改的代

码，进行修改，快速接手项目.

5. 丰富的生态圈

基于强大的nodejs，添加新的组件库，基本一句npm命令就能安装，比如当我需要使用axios组件

的时候，直接npm install axios安装一下，就可以使用axios这个组件。

6. 开发单页面应用非常友好

主路由、子路由、主页面、子组件的方式，可以让我们彻底抛弃iframe。写过前端页面的都知道，

因为iframe的滚动条、和子页面跟其他页面的交互性这些原因、用户体验还是远远没有单页面架构

友好。而且使用vue非常简单方便的实现系统菜单、导航等固定布局.

7. 各子组件样式不冲突

各个组件之间，可以使用相同的样式名，但有不同的样式属性。比如组件A和组件B的button都绑

定了class="btn", 但在两个组件里，我们可以实现两个不同的btn样式属性，互不影响

当然，vue也有不足，不足的地方如下：

1. vue是单页面页面，对于搜索引擎不友好，影响seo.因此不适合做公司官网。比如两个vue路

由（页面），它的路径是这样的：index.html#aaa 和 index.html#bbb，但对于搜索引擎来

说，都是同一个页面，就是index.html。这样搜索引擎就无法收录你的页面。

1. vue门槛较高，使用vue，需要先学习和摸索vue大概3天左右的时候，建议使用vue的时候，

不需要看node.js自动帮你生成的js文件。你只需要编写你自己页面的代码就行了。element-UI的table组件有哪些属性，为什么table组件要用key?

table表格组件的属性有:

data , 显示的数据

size , 表格的尺寸, 可选的值有medium / small / mini

height , Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px.

empty-text , 空数据时显示的文本内容

stripe , 是否为斑马纹 table , boolean类型.

border , 是否带有纵向边框 , boolean类型.

row-key , 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据

时，该属性是必填的.

...

为什么table组件要用key?

row-key属性用来优化 Table 的渲染, 如果不添加row-key，当重新请求渲染表格数据，会默认触发

@current-change等等方法，因为重新渲染列表，current-change发生了改变，原本选择的row，变成

不再选择任何一行，导致问题很难排查.

参考官网: table组件

二、react

说说React中onClick绑定后的工作原理

1. 首先react有自己的事件系统,也是遵循w3c的,这个事件系统的名称叫做合成事件(SyntheticEvent),而

其自定义事件系统的动机主要包含以下几个方面

抹平不同浏览器之间的兼容性差异。最主要的动机。

件合成既可以处理兼容性问题

提供一个抽象的跨平台事件机制

可以做更多优化

可以干预事件的分发

2. 当给组件(元素)绑定 onClick 事件之后

1. react会对事件先进行注册,将事件统一注册到 document 上

2. 根据组件 唯一的标识key 来对事件函数进行存储

3. 统一的指定 dispatchEvent 回调函数

4. 储存事件回调: react会将click 这个事件统一存到一个对象中,回调函数的存储采用键值对

（

key/value）的方式存储在对象中，key 是组件的唯一标识 id，value 对应的就是事件的回

调函数,通过组件的key就能回调到相应的函数了说说react里面bind与箭头函数

1. bind 由于在类中,采用的是 严格模式 ,所以事件回调的时候 会丢失this指向,指向undefined ,需要

使用bind来给函数绑定上当前实例的this指向

2. 箭头函数 的this指向上下文,所以永久能拿到当前组件实例的 this 指向,我们可以完美的使用箭头

函数来替代传统事件处理函数的回调

说说react中的性能优化

性能优化分为2个方面

1. 使用shouldComponentUpdate来对state和props进行对比,如果两次的结果一直,那么就return false

2. 使用纯净组件,pureComponent

高阶组件和高阶函数是什么

1. 高阶函数:函数接收一个函数作为参数,或者将函数作为返回值的函数就是高阶函数 map some every

filter reduce find forEach等等都属于高阶函数

2. 高阶组价:接受一个组件,返回一个新组建的组件就是高阶组件,本质上和高阶函数的意思一样

3. 高阶组件是用来复用react代码的一种方式

setState和repalceState的区别

setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态； replaceState

是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么

state 中就没有这个状态了

redux中核心组件有哪些，reducer的作用

redux 三大核心

action action理解为动作，action的值一般为一个对象，格式如 { type: "", data: "" }，type是必须要

的，因为reducer处理数据的时候要根据不同的type来进行不同的操作

reducer reducer是初始化以及处理派发的action的纯函数

store store是一个仓库，用来存储数据，它可以获取数据，也可以派发数据，还能监听到数据的变

化

reducer的作用

接收旧的 state 和 action，返回新的 state

什么是受控组件

受控组件就是可以被 react 状态控制的组件

在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）。但

是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传

入，此时就成为受控组件。

hooks+context和redux你是怎么选择的，都在什么场景下使用

如果项目体量较小，只是需要一个公共的store存储state，而不讲究使用action来管理state，那context完

全可以胜任。反之，则是redux的优点。使用场景:

如果你在组件间传递的数据逻辑比较复杂，可以使用redux；

如果组件层级不多，可以使用props；

如果层级较深，数据逻辑简单，可以使用context。

useffect 模拟生命周期

模拟componentDidMount

第二个参数为一个空数组，可以模拟componentDidMount

模拟componentDidUpdate

没有第二个参数代表监听所有的属性更新

监听多个属性的变化需要将属性作为数组传入第二个参数。

模拟componentWillUnmount

setsate更新之后和usestate的区别

setState( updater [,callback] )

updater：object/function - 用于更新数据

callback：function - 用于获取更新后最新的 state 值

构造函数是唯一建议给 this.state 赋值的地方

不建议直接修改 state 的值，因为这样不会重新渲染组件

自动进行浅合并（只会合并第1层）

由于 setState() 异步更新的缘故，依赖 state 旧值更新 state 的时候建议采用传入函数的方式

useState(initState)

const [ state , setState ] = useState(initState)

state：状态

setState(updater) ：修改状态的方法

updater：object/function - 用于更新数据

initState：状态的初始值

react父组件props变化的时候子组件怎么监听

当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过

调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安

全的，并不会触发额外的render调用

componentDidMount：useEffect(()=>{console.log('第一次渲染时调用')},[])

useEffect(()=>{console.log('任意状态改变')})

useEffect(()=>{console.log('指定状态改变')},[状态1,状态2...])

useEffect(()=>{ ... return()=>{ //组件卸载前} })

//props发生变化时触发

componentWillReceiveProps(props) {

console.log(props)

this.setState({show: props.checked})

}usememo在react中怎么使用

返回一个 memoized 值。

把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized

值。这种优化有助于避免在每次渲染时都进行高开销的计算。

传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这

类的操作属于 useEffect 的适用范畴，而不是 useMemo。

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择“遗

忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有

useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目

的。

React Hooks各种函数介绍

useState:

useState 是用于声明一个状态变量的，用于为函数组件引入状态.

useState 只接收一个参数，这个参数可以是数字、字符串、对象等任意值，用于初始化声明的状态

变量。也可以是一个返回初始值的函数，最好是函数，可在渲染时减少不必要的计算。

返回一个长度为2的读写数组，数组的第一项是定义的状态变量本身，第二项是一个用来更新该状

态变量的函数，约定是 set 前缀加上状态的变量名.

useState Hook 中返回的 setState 并不会帮我们自动合并对象状态的属性;

setState 中接收的对象参数如果地址没变的话会被 React 认为没有改变，因此不会引起视图的更新

useReducer:

useReducer 是 useState 的升级版。在 useState 中返回的写接口中，我们只能传递最终的结果，在

setN 的内部也只是简单的赋值操作。

创建初始状态值initialState,

创建包含所有操作的 reducer(state, action) 函数，每种操作类型均返回新的 state 值

根据 initialState 和 reducer 使用 const [state, dispatch] = useReducer(reducer, initialState) 得到读写

API

调用写接口，传递的参数均挂在 action 对象上

useContext:

context 是上下文的意思，上下文是局部的全局变量这个局部的范围由开发者自己指

useEffect:

effect 是副作用的意思，对环境的改变就是副作用。副作用是函数式编程里的一个概念

在 React 中，useEffect 就是在每次 render 后执行的操作，相当于 afterRender， 接收的第一个参数

是回调函数，第二个参数是回调时机。可用在函数组件中模拟生命周期。

如果同时出现多个 useEffect ，会按出现顺序依次执行

useLayoutEffect

useEffect 总是在浏览器渲染完视图过后才执行，如果 useEffect 里面的回调函数有对 DOM 视图的操

作，则会出现一开始是初始化的视图，后来执行了 useEffect 里的回调后立马改变了视图的某一部

分，会出现一个闪烁的状态。

为了避免这种闪烁，可以将副作用的回调函数提前到浏览器渲染视图的前面执行，当还没有将 DOM

挂载到页面显示前执行 Effect 中对 DOM 进行操作的回调函数，则在浏览器渲染到页面后不会出现

闪烁的状态。layout 是视图的意思，useLayoutEffect 就是在视图显示出来前执行的副作用。

useEffect 和 useLayoutEffect 就是执行的时间点不同，useLayoutEffect 是在浏览器渲染前执行，

useEffect 是在浏览器渲染后执行。但二者都是在 render 函数执行过程中运行，useEffect 是在

render 完毕后执行，useLayoutEffect 是在 render 完毕前（视图还没渲染到浏览器页面上）执行。

因此 useLayoutEffect 总是在 useEffect 前执行。

一般情况下，如果 Effect 中的回调函数中涉及到 DOM 视图的改变，就应该用 useLayoutEffect，如

果没有，则用 useEffect。

useRef

useRef Hook 是用来定义一个在组件不断 render 时保持不变的变量。

组件每次 render 后都会返回一个虚拟 DOM，组件内对应的变量都只属于那个时刻的虚拟 DOM。

useRef Hook 就提供了创建贯穿整个虚拟 DOM 更新历史的属于这个组件的局部的全局变量。

为了确保每次 render 后使用 useRef 获得的变量都能是之前的同一个变量，只能使用引用做到，因

此，useRef 就将这个局部的全局变量的值存储到了一个对象中，属性名为：current

useRef 的 current 变化时不会自动 render

useRef 可以将创建的 Refs 对象通过 ref 属性的方式引用到 DOM 节点或者 React 实例。

useCallback

是将某个函数“放入到react底层原型链上，并返回该函数的索引”，而useMemo是将某个函数返回值

“放入到react底层原型链上，并返回该返回值的索引”。一个是针对函数，一个是针对函数返回值。

useImperativeHandle

useImperativeHandle可以让父组件获取并执行子组件内某些自定义函数(方法)。本质上其实是子组

件将自己内部的函数(方法)通过useImperativeHandle添加到父组件中useRef定义的对象中。

useMemo

useMemo可以将某些函数的计算结果(返回值)挂载到react底层原型链上，并返回该函数返回值的索

引。当组件重新渲染时，如果useMemo依赖的数据变量未发生变化，那么直接使用原型链上保存的

该函数计算结果，跳过本次无意义的重新计算，达到提高组件性能的目的。

React Component和Purecomponent区别

Component 没有直接实现 shouldComponentUpdate 这个方法；但是 PureComponent通过浅层的Porps 和

state 的对比，内部实现了这个生命周期函数。

PureComponent会跳过整个组件子树的props更新，要确保全部的子组件也是 pure 的形式。

Component 中需要手动执行的 shouldComponentUpdate 函数，在PureComponent中已经自动完成了（自

动浅对比）。

PureComponent不仅会影响本身，而且会影响子组件，所以PureComponent最好用在数据展示组件中

PureCoponent 如果是复杂数据类型，这里会造成错误的显示（

setState浅复制更新，但是界面不会重新

渲染）

hooks相对于class的优化

类组件缺点一：复杂且不容易理解的“this”

Hooks解决方式：函数组件和普通JS函数非常相似，在普通JS函数中定义的变量、方法都可以不使用

“this.”，而直接使用该变量或函数，因此你不再需要去关心“this”了。类组件缺点二：组件数据状态逻辑不能重用

Hooks解决方式：

通过自定义Hook，可以数据状态逻辑从组件中抽离出去，这样同一个Hook可以被多个组件使用，解决组

件数据状态逻辑并不能重用的问题。

类组件缺点三：组件之间传值过程复杂、缺点三：复杂场景下代码难以组织在一起

Hooks解决方式：

通过React内置的useState()函数，可以将不同数据分别从"this.state"中独立拆分出去。降低数据复杂度和

可维护性，同时解决类组件缺点三中“内部state数据只能是整体，无法被拆分更细”的问题。

通过React内置的useEffect()函数，将componentDidMount、componentDidUpdate、

componentWillUncount 3个生命周期函数通过Hook(钩子)关联成1个处理函数，解决事件订阅分散在多个

生命周期函数的问题。

hooks父组件怎么调用子组件的方法

父组件使用 useRef 创建一个 ref 传入 子组件

子组件需要使用 useImperativeHandle 暴露 ref 自定义的实例值给父组件。这个需要

用 forwardRef 包裹着。

讲一下react中的通信

1 父子通信， 使用的时候 在子组件上面自定义属性，子组件通过 this.props[累组件]或者props[函数

组件]接收然后使用

2 子父通信 ，使用的时候其实还是父传子，只不过这次将父组件的方法传递给子组件，然后子组件

去调用父组件传递的方法，通过传递实参的我方式将子组件的数据传递过来

子组件

class Son extends React.Component {

render(){

// this.props.til til 为父组件传递数据

return <div>...</div>

}

}

父组件

class Home extends React.Component {

render(){

return <>

<Son til="参数" />

</>

}

}

class Son extends React.Component {

render(){

// this.props.til til 为父组件传递数据

return <div onClick={()=>this.props.onData('传递的数据')}>...</div>

}

}

父组件

class Home extends React.Component {

getData=(data)=>{//data就是接收的参数。可以在里面来使用

}

render(){

return <>

<Son onGetData={this.getData}/>

</>

}

}

3 状态提升，这种情况将两个组件通过同一个父组件来包裹，将数据绑定到父组件上，然后通过子父

和父子进行通信

4 context传递 ， 利用Context对象来传递，Context 提供了 Provider 和 Consumer 俩个组件，Provider

负责提供数据，Consumer负责使用数据 ， Provider需要包裹父组件，那么所有它的子代组件都可以获取

到共享值，实际上react-router，react-redux 等等都在使用context

const Context = React.Contexxt('这里是默认值')；

// App组件里面

class App extends React.Component {

render(){

return <>

<Context.Provider value={data ‘传递的数据’} >

<Home /> // 只要是home的组件的子代组件都可以获取到传餐

<Context.Provider>

</>

}

}

// Home 组件

class Home extends React.Component {

render(){

return <>

<Son />

<Context.Consumer>

{

data=> data就可以拿到数据

}

</Context.Consumer>

</>

}

}

// Son

class Son extends React.Component {

static contextType = Context. // 可以静态接收。接收完之后。可以使用 this.context来调用

context的值

render(){

return <>

//Son组件里面可以获取到 context的值

<Context.Consumer>

{

data=> data就可以拿到数据

}

</Context.Consumer>

</>

}

}5 reudx. 可以使用redux 来进行组件通信，适用于多个组件使用同一个数据 ，可以更好的维护和使用

react通过什么方法修改参数

类组件修改数据的方法, 通过setState , 注意setState的修改方法有两种，而且它是异步的

函数组件修改方式通过自定义的方法。需要通过 useState ， 例如。const [count,setCount] = useState(0)

这里面setCount 可以修改count参数

说你对react native的了解

React native 基于 JavaScript 开发的一个 可以开发原生app的这么一个集成框架，它兼容开发 iOS 和

Android能够实现一套代码，两个系统都能使用，方便维护，相比于web前端的 react ，react-native更好

的提供了一些调用手机硬件的API,可以更好的开发移动端，现在react-native它的生态环境也是越来越好，

基本上可以完全实现原生开发，

但是现在好多的应用还是用它来套壳 （原生 + web前端），用它来做有些路由，和框架的搭建，然后

里面内容来使用前端的react来实现，这样一来让维护更方便，开发更快捷

redux的实现原理

redux它是一个单独的状态管理工具，它是一个数据集中管理的方案，简单来说，就是将公用的数

据，放在redux里面进行存储，修改的时候也是利用redux提供的方法来修改，让框架使用的数据的时候

更方便，维护起来更容易，reudx提供了一下核心内容：

1 store.

store是redux的核心内容，整个redux的仓库，所有的应用方法都是由store提供

2 createStore

createStore用老创建store的，方法里面有三个参数，有reducer,有中间件，还有初始值，最重要的

就是reducer函数，它提供了整个数据管理的逻辑

3 reducer(state, action)

reducer函数相当于数据加工厂，初始的数据，修改数据的 逻辑都统统的在这里完成，它让我们

整个的数据走向更完成，维护更方便

4 action

action 本质是一个对象，它来告诉 redux 要执行什么任务

5 state

state它就是我们需要存储的redux的数据，所有的数据都将要在这里面存储

6 store.getState()

它就是用来获取数据的，每次修改前后的数据都可以用store.getState()来修改7 store.dispatch(action)

用户通过dispatch出发要执行的任务，这个就是出发动作，然后reducer函数会执行，然后进行数

据加工

8。store.subscribe(callback)

会自动的监听state,一旦有state发生改变，store.subscribe就会还行，利用它可以用来更新视图

react里的一个输入框每当用户输入文字就会触发onchange，我们怎么拿到

他最后输入完的结果

1 第一种是通过受控组件，可以获取到state里面的值，获取修改结果

2 第二种通过ref来获取里面的值

react的render什么时候渲染

react生命周期有三个阶段。 两个阶段都会执行 render

主要从更新和挂载两个阶段来讲，挂载阶段都顺序，更新阶段一定要说 shouldComponentUpdate

true 和false 分别对应后边是否执行render

class Home extends React.Component {

state = {

val:""

}

//这是一个通用的写法，然后注意 name的值一定要与state定义的一直

changeInput = (e) =>{

let {name,value} = e.target

this.setState({

[name]:value

})

}

render(){

return <>

<input onChange="this.state.val" />

</>

}

}

class Home extends React.Component {

render(){

// this.val 获取里面的真是dom

return <input ref={node=>this.val} />

}

}

1） 挂在阶段

• constructor(){}

• static getDerivedStateFromProps(){useEffect的依赖为引用类型如何处理

useEffect的依赖为饮用类型的时候，可能会导致监听不出发，原因就是监听的统一个地址的时候，对象

本身地址没变，所以监听的结果就是认为数据并没有改变从而不直径调用

解决方案

1 如果数据是对象的话，可以监听对象的里面的值，值是基本类型，如果值改变了，那么可以监听执

行

2 在去修改对象和数据的时候，使用参拷贝或者浅拷贝，这样地址发生改变可以监听执行

3 可以转成字符串，通过JSON.stringify() ,监听字符串这样的，这样改变也会执行