金三银四，2022前端面试准备，精选重点复习

自我介绍

这个我不多说了，如果你连这个没准备好，那你是对自己和应聘公司的不负责。而事实是偏偏很多人都没有准备好，结果balabala下来一轮，等于是给HR催眠，或者是把简历念了一遍

HR问还有什么想问的和你对工作岗位的诉求

可以问：

• 入职的部门现状
• 人员配置、开发的项目
• 使用的技术栈
• 公司发展现状
• 试用期、福利待遇 表示我的对贵公司的诚意：
• 我很热爱前端工作
• 在之前的工作岗位，日常做的事情，技术含量较低，期望更好的成长、
• 咱们公司之前朋友推荐，了解过咱们公司的开发，流程还是很规范的，技术氛围也挺好，希望能够有机会和诸位小伙伴们一起成长
• 如果我有幸入职，我主要从事那个方向的工作？我这边也可以提前做一些准备

1.vue组件通信

• props和$emit(常用)
• $attrs和$listeners
• 中央事件总线（非父子组件间通信）
• v-model
• provide和inject
• $parent和$children
• vuex

2. vue生命周期

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后 ）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）

在实例销毁之前调用，实例仍然完全可用，

1. 这一步还可以用this来获取实例，
2. 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

3.深浅拷贝

(1)浅拷贝

浅拷贝即只复制对象的引用，所以副本最终也是指向父对象在堆内存中的对象，无论是副本还是父对象修改了这个对象，副本或者父对象都会因此发生同样的改变；

(2)深拷贝

深拷贝则是直接复制父对象在堆内存中的对象，最终在堆内存中生成一个独立的，与父对象无关的新对象。深拷贝的对象虽然与父对象无关，但是却与父对象一致。当深拷贝完成之后，如果对父对象进行了改变，不会影响到深拷贝的副本，同理反之亦然。

4.基础类型

• Number、String、Boolean、Null、undefined、object、symbol、bigInt
• Object:Data、function、Array

• { } 、[ ] 输出 object
• 注意一点：NaN 是 Number 中的一种，非Number 。

5.响应式原理

6.Vue为什么用虚拟dom，虚拟DOM是啥？

优点：虚拟DOM就是为了解决浏览器性能问题而被设计出来的（减少重排重绘从而节省浏览器的性能开销）

虚拟DOM是：通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。假如是首次节点的渲染就直接渲染，但是第二次的话就需要进行虚拟节点树的比较，只渲染不同的部分。

从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。

虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对 DOM的描述。它设计的最初目的，就是更好的跨平台，比如Node.js就没有DOM，如果想实现SSR，那么一个方式就是借助虚拟DOM，因为虚拟DOM本身是js对象。 在代码渲染到页面之前，vue会把代码转换成一个对象（虚拟 DOM）。以对象的形式来描述真实DOM结构，最终渲染到页面。在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进行比较。在vue内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。

另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。

7.DIFF 算法了解不

• 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
• 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

• 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了

在新老虚拟DOM对比时：

• 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
• 如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)

• 比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。
• 匹配时，找到相同的子节点，递归比较子节点

在diff中，只对同层的子节点进行比较，放弃跨级的节点比较，使得时间复杂从O(n3)降低值O(n)，也就是说，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

8.为什么v-for后面需要加key值

优点：key值主要是提高虚拟DOM的效率

作用：为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

9.Data 为什么是一个函数返回

• 不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
• 当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象

10.v-if 和 v-show 的区别？如何使用？

• v-if:如果为flase是直接删除元素
• v-show为flase是讲块级元素转为none

如果操作频繁使用v-show，可以减少dom的开支，操作不频繁使用v-if

11.Promise 对象的理解

promise是用来解决回调地狱的问题的。可以链式调用，可以嵌套调用。

• promise是一个构造函数，用来生成Promise实例。支持异步。这个构造函数里接受一个函数作为参数，该函数有两个参数，分别是：resolve（异步操作成功之后的回调函数）、reject（异步操作失败之后的回调函数）。
• Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

• then方法返回的是一个新的Promise实例。，可进行链式调用。后一个回调函数会等前一个Promise对象的状态发生变化的时候，才会被调用
• catch（）方法，是.then(null, rejection)或者是.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

• finally（）方法，用于指定不管Promise对象最后的状态如何，都会执行的操作，在执行完then或catch指定的回调函数
• all()方法，用于将多个Promise实例，包装成一个新的Promise实例，该方法接受一个数组作为参数，p1、p2、p3都是Promise实例，当三者的状态都变为fulfilled，all()的实例的状态才会变成fulfilled，只要有一个rejected，all的实例的状态就会变成rejected

• race（）方法，同样也是包装成一个新的Promise实例，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
• any()方法，与race的方法很像，只有一点不同，就是不会因为某个Promise变成rejected装填而结束。

12.工厂函数、构造函数的理解

（对象）工厂函数：

• 工厂函数，顾名思义，就是通过一个＂工厂的加工＂ 来创建一个对象的函数

//工厂函数
function createPerson(name,sex){
sex = sex == '男' ? '女'` `: sex // '加工'
return` `{\   name:name,
sex:sex\ };
}
var p =createPerson('张三','男');

缺点：这种操作在需要创建多个相似对象时可以有效地减少重复代码，但是这样有个缺点就是，每次调用工厂函数创建的对象都是独立的object，不存在继承关系，显然，这样的面向对象编程失去了灵魂

构造函数：

• 构造函数创建的对象的constructor对象引用的是该构造函数, 即

p.constructor === Person ``//true

• 在调用构造函数时要使用new关键字，在使用了new关键字后，内部进行了四个步骤：

• • 构造函数创建一个空对象
  • 构造函数里的this指向该空对象

• • 空对象的内部原型指向构造函数的原型对象
  • 构造函数执行完之后, 如果没有return的话, 就把该空对象返回

• 如果不使用new 关键字，调用构造函数时，就会当成普通的函数调用，里面的this 指向的就是window，且如果没有return就不会返回；

13.原型和原型链的理解

原型

Javascript中有一句话，叫一切皆是对象，当然这句话也不严谨，比如null和undefined就不是对象，除了这俩完全可以说Javascript一切皆是对象。而Javascript对象都有一个叫做原型的公共属性，属性名是proto。这个原型属性是对另一个对象的引用，通过这个原型属性我们就可以访问另一个对象所有的属性和方法。比如：

let numArray = [1, 2, -8, 3, -4, 7];

Array对象就有一个原型属性指向Array.prototype,变量numArray继承了Array.prototype对象所有的属性和方法。

原型链

在Javascript中如果访问一个对象本身不存在的属性或是方法，就首先在它的原型对象上去寻找，如果原型对象上也不存在，就继续在原型对象的原型对象上去寻找，直到找到为止。那么原型对象有尽头么？所有对象的原型尽头是Object.prototype,那么Object.prototype这个对象的proto指向啥呢？答案是null。我们日常开发中用到的绝大多数对象的proto基本不会直接指向Object.prototype,基本都是指向另一个对象。比如所有的函数的proto都会指向Function.prototype,所有数组的proto都会指向Array.prototype。

14.闭包

原理：闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

15.前端的常见优化？防抖、节流？懒加载？

常见的优化

• 减少HTTP请求次数
• 尽量合并图片

• script标签要紧挨着body结束标签
• 压缩CSS和JS

• 减少Cookie的大小

防抖

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

// 函数防抖的实现
function debounce(fn, wait) {
let timer = null;

return function() {
let context = this,
args = arguments;

// 如果此时存在定时器的话，则取消之前的定时器重新记时
if (timer) {
clearTimeout(timer);
timer = null;
}

// 设置定时器，使事件间隔指定事件后执行
timer = setTimeout(() => {
fn.apply(context, args);
}, wait);
};
}

节流

函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。

// 函数节流的实现;
function throttle(fn, delay) {
let curTime = Date.now();

return function() {
let context = this,
args = arguments,
nowTime = Date.now();

// 如果两次时间间隔超过了指定时间，则执行函数。
if (nowTime - curTime >= delay) {
curTime = Date.now();
return fn.apply(context, args);
}
};
}

懒加载

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。

16.null和undefined区别

undefined 代表的含义是未定义，null 代表的含义是空对象

17.forEach和map方法有什么区别

这方法都是用来遍历数组的，两者区别如下：

• forEach()方法会针对每一个元素执行提供的函数，对数据的操作会改变原数组，该方法没有返回值；arr.foreach((el,index )=>{el})
• map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值；

const map1 = array1.map(x => x * x)

18.use strict是什么意思

use strict 是一种 ECMAscript5 添加的（严格模式）运行模式，这种模式使得 Javascript 在更严格的条件下运行。设立严格模式的目的如下：

• 消除 Javascript 语法的不合理、不严谨之处，减少怪异行为;
• 消除代码运行的不安全之处，保证代码运行的安全；

• 提高编译器效率，增加运行速度；
• 为未来新版本的 Javascript 做好铺垫。

区别：

• 禁止使用 with 语句。
• 禁止 this 关键字指向全局对象。

• 对象不能有重名的属性。

19.数组有哪些原生方法？

• 数组和字符串的转换方法：toString()、toLocalString()、join() 其中 join() 方法可以指定转换为字符串时的分隔符。
• 数组尾部操作的方法 pop() 和 push()，push 方法可以传入多个参数。

• 数组首部操作的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort()，sort() 方法可以传入一个函数来进行比较，传入前后两个值，如果返回值为正数，则交换两个参数的位置。
• 数组连接的方法 concat() ，返回的是拼接好的数组，不影响原数组。

• 数组截取办法 slice()，用于截取数组中的一部分返回，不影响原数组。
• 数组插入方法 splice()，影响原数组查找特定项的索引的方法，indexOf() 和 lastIndexOf() 迭代方法 every()、some()、filter()、map() 和 forEach() 方法

• 数组归并方法 reduce() 和 reduceRight() 方法

20.call、apply 及 bind 函数区别

call跟apply的用法几乎一样，唯一的不同就是传递的参数不同，call只能一个参数一个参数的传入。apply则只支持传入一个数组，哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。至于bind方法，他是直接改变这个函数的this指向并且返回一个新的函数，之后再次调用这个函数的时候this都是指向bind绑定的第一个参数。bind传餐方式跟call方法一致。

21.css3新增那些属性

• border-radius 圆角边框
• 盒子阴影 box-shadow 属性有五个值，分别是

• • offset-x 阴影的水平偏移量；
  • offset-y 阴影的垂直偏移量;

• • blur-radius 模糊距离；
  • spread-radius 阴影尺寸；

• • 颜色;

• 文本阴影效果 text-shadow 属性有四个值，分别是

• • offset-x 阴影的水平偏移量；
  • offset-y 阴影的垂直偏移量;

• • blur-radius 模糊距离；
  • 颜色

• 2D转换

• • transform：通过 CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

transform：ranslate(50px,100px) | rotate(360deg) | scale(1.2) | skew(20deg,30deg)

• 3D转换

• • rotateX()
  • rotateY()

• css3过渡
• css3动画

• 布局相关样式：多栏布局、盒布局、弹性盒布局

22.flex布局

• 以下6个属性设置在容器上：

• • flex-direction属性决定主轴的方向（即项目的排列方向）。
  • flex-wrap属性定义，如果一条轴线排不下，如何换行。

• • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  • justify-content属性定义了项目在主轴上的对齐方式。

• • align-items属性定义项目在交叉轴上如何对齐。
  • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• 以下6个属性设置在项目上：

• • order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• • flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
  • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

23.flex垂直水平居中

box:{display: flex;
justify-content:center;
align-items:center;
}

24.清除浮动

.clear::after{
content:'';
display: block;
clear:both;
}

25.对BFC的理解，如何触发BFC

先来看两个相关的概念：

• Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。
• Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。

• 触发的BFC条件：

• • 根元素：body；
  • 元素设置浮动：float 除 none 以外的值；

• • 元素设置绝对定位：position (absolute、fixed)；
  • display 值为：inline-block、table-cell、table-caption、flex等；

• • overflow 值为：hidden、auto、scroll；

26.link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。

27.transition和animation的区别

• transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
• animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

28.数据模型MVVM、MVC

MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构

MVVM 分为 Model、View、ViewModel：

• Model代表数据模型，数据和业务逻辑都在Model层中定义；
• View代表UI视图，负责数据的展示；

• ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

29.双向数据绑定的原理

主要分为以下几个步骤：

1. 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
4. MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

30.vue自定义指令

directives: { 指令名: { // 指令的定义 钩子函数名: function (el,binding) { // 业务逻辑 } }}

31.路由的hash和history模式的区别

Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。

1. hash模式

简介： hash模式是开发中默认的模式，它的URL带着一个#，例如：www.abc.com/#/vue，它的hash值就是#/vue。

特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。

原理： hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
}

2. history模式

简介： history模式的URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。 特点： 当使用history模式时，URL就像这样：abc.com/user/id。相比hash模式更加好看。但是，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。 API： history api可以分为两大部分，切换历史状态和修改历史状态：

• 修改历史状态：包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果，就需要前端用上这两个API。
• 切换历史状态： 包括forward()、back()、go()三个方法，对应浏览器的前进，后退，跳转操作。

虽然history模式丢弃了丑陋的#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。

如果想要切换到history模式，就要进行以下配置（后端也要进行配置）：

const router = new VueRouter({
mode: 'history', routes: [...]
})

32.$route 和$router 的区别

• $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数
• $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

33.如何定义动态路由？如何获取传过来的动态参数

（1）param方式

• 配置路由格式：/router/:id
• 传递的方式：在path后面跟上对应的值

• 传递后形成的路径：/router/123

(1）路由定义

//在APP.vue中
用户
//在index.js
{ path: '/user/:userid', component: User, },

(2）路由跳转

// 方法1：
按钮</router-link
// 方法2：
this.$router.push({name:'users',params:{uname:wade}})\ // 方法3：\ this.$router.push('/user/' + wade)

(3）参数获取 通过 $route.params.userid 获取传递的值

（2）query方式

• 配置路由格式：/router，也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/route?id=123

(1）路由定义

//方式1：直接在router-link 标签上以对象的形式
档案
// 方式2：写成按钮以点击事件形式
<button @click='profileClick'>我的
//profileClick点击事件
profileClick(){ this.$router.push({
path: "/profile",
query: {name: "kobi",age: "28",height: 198}
});
}

(2）跳转方法

// 方法1：
按钮
// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})\ // 方法3：\ <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>\ // 方法4：\ this.$router.push({ path: '/user', query:{ uname:james }})
// 方法5：
this.$router.push('/user?uname=' + jsmes)

(3）获取参数

通过$route.query 获取传递的值

34.Vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

• state => 基本数据(数据源存放地)
• getters => 从基本数据派生出来的数据
• mutations => 提交更改数据的方法，同步
• actions => 像一个装饰器，包裹mutations，使之可以异步。
• modules => 模块化Vuex

复习图谱：

整理文章的目的其实很简单，自己没事也可以看看，好不好不重要，但是热爱🔥，喜欢大家能够喜欢我的短文，也希望通过文章认识更多志同道合的朋友，

v❤:qcsjin888

GitHub：goddits

伙伴们，如果对你有帮助到点一个赞👍或者关注➕都是对我最大的支持。