Web 前端面试题

1.给你一个盒子如何让他水平垂直居中 ？

给外面的大盒子使用弹性盒子display：flex布局然后给里面的小盒子使用margin：auto可以直接实现水平垂直居中

2.flex布局里面justify-content里面有几个属性 ？

1. space-around 第一个盒子和最后一个盒子的左边和右边都会平均分配空白，中间的空白在盒子之间平均分配
2. space-between 第一个盒子和最后一个盒子贴着两边，中间的空白在盒子之间平均分配
3. center 居中

3.css的动画你有了解吗

animaion可以定义关键帧，在关键帧之间过度

@keyframes 名字{

0%{}

100%{}

}

animation: 名字 5s infinite

4.常用的布局方式有哪些 ？

1. 响应式布局
2. 圣杯布局
3. div+css
4. 双飞翼布局

5.rem、em和px的区别 ？

1. px 是像素，是固定的设置多大就是多大，无法因为适应页面大小而改变
2. em 和 rem 更具有灵活性它们是相对长度单位，长度不是定死的，根据页面自适应的
3. em 相对于父元素的字体大小 rem 是相对于 html 一个是根据父元素，一个是根据 根元素

6.说一下html5 新增的哪些特性 ？

1. 视频音频 audio video
2. 画布 canvas

7.去除浮动有哪些 ？

1. 在最后一个盒子的后面添加一个空盒子，给盒子添加属性 clear：both 盒子要是块级。
2. 给父级添加overflow：hidden 属性
3. 给父级后面添加 after 伪元素

.clearfix:after {

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

8.使用css动画 ？

1. translate() 平移操作
2. rotate（）旋转
3. scale（）放大缩小
4. skew（）倾斜
5. transition （）过渡

9.字符串如何转number ？

1. parseInt 转成整数
2. Number 转换成数字
3. parseFloat 转为浮点数

10.如何判断一个变量是否是undefined数组如何去重 ？

typeof 判断类型

set（）去重

filter（） indexof 过滤

const arr = [1,2,3,4,1]

const qarr = arr.filter((item,index)=>arr.indexof(item) === index)

console.log(qarr)

11.undefined和null的区别

undefined 表示未定义，就是有值但没有赋值上去

null 就是没有,空值

12.数组如何去重 ？

filter（） indexof 过滤

const arr = [1,2,3,4,1]

const qarr = arr.filter((item,index)=>arr.indexof(item) === index)

console.log(qarr)

13.如何判断两个数组的数据相等 ？

定义一个函数，判断两个数组的长度，然后再用for循环，循环遍历一下数组然后判断数组元素中的值
functionarraysAreEqual(arr1, arr2) {
 // 比较数组长度
if (arr1.length !== arr2.length) {
 return  false;
 } 
// 比较数组元素
for (let i = 0; i < arr1.length; i++) {
 if (arr1[i] !== arr2[i]) {
 return   false; 
} 
}
 return  true;
 }
 // 示例用法
const array1 = [1, 2, 3];
 const array2 = [1, 2, 3]; 
const array3 = [1, 2, 4]; 
console.log(arraysAreEqual(array1, array2)); // true
console.log(arraysAreEqual(array1, array3)); // false

 14.箭头函数和普通函数的区别 ？

1. 箭头函数不能用于构造函数，普通函数可以用于构造函数
2. 箭头函数中没有this
3. 箭头函数不具有 实参 arguments
4. 箭头函数没有原型对象

15.使用箭头函数的时候有什么需要注意的 ？

1. 箭头函数没有自己的this
2. 不可以作为构造函数
3. 不可以使用 arguments

16.js中的数据类型 ？

1. string 字符串
2. null 空
3. undefined 未定义
4. symbol 代表
5. Bollean 布尔值
6. number 数字
7. biglnt 任意精度的整数
8. object 对象 object：Array ，object ，function ， date ， regexp

17.解释一下闭包 ？

闭包就是内部可以调用外部函数作用域中的变量

18.map和for循环的区别 ？

map 是对每个元素进行相同的操作，返回新的数组

for循环：在对数组需要一些操作的时候根据一些条件来修改元素时，使用for循环

19.this指向问题

this 指向是指向它的调用者

在普通模式下没有直接调用者，则this指向的是window

使用 call apply bind 绑定，this指向绑定的对象

20.如何实现字符串转数组 ？

1. split（）方法将字符串分割为数组
2. 展开运算符 [...] const chars = [ ...数组 ]
3. Array.form const chars = Array.from(数组)
4. 解构赋值 const [ ...chars ] = 数组

21.forEach 和map的区别 ？

map 有返回值而且必须 return 返回一个数组才行，而foreach 没有返回可直接打印结果

map 里可以用return 而foreach里return里没有用

22.闭包的应用场景，优缺点 ？

优点：
1.可以避免全局污染
2.可以延长变量的生命周期
缺点：
1.长期储存在内存中，导致内存消耗大
2.在低版本的IE中可能会导致内存泄漏
应用场景：
  //原生的setTimeout传递的第一个函数不能传参
     setTimeout(function(param){    
           alert(param)   
      },1000)

23.如果是一个伪类数组怎么转化为一个正常数组

1. 展开运算符 [...] const chars = [ ...数组 ]
2. Array.form const chars = Array.from(数组)
3. 解构赋值 const [ ...chars ] = 数组

24.说一下防抖和节流 ？

防抖：触发多个事件，只执行最后一次

节流：触发多个事件，只执行第一次

25.防抖和节流在什么场景下使用 ？

防抖：

输入框的实时搜索，可以用防抖延迟搜索查询

节流：

鼠标移动事件或者鼠标点击比较频繁的事件

26.get和post的区别 ？

GET 和 POST 方法的区别

1、发送的数据数量
在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
4、编码
在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据

27.实现同步异步的方法 ？

promise

async/await

异步函数

回调函数

异步回调

28.对异步和同步的理解 ？

同步：按照代码编写的顺序依次执行

异步：不会立即执行，需要等待一些条件满足，才会执行

29.深拷贝和浅拷贝的区别 ？

在赋值一个对象的时候，拷贝的深度不同

深拷贝在进行拷贝时候会对所有属性进行拷贝，直到考到最底层为止,对拷贝之后的数据进行修改不会影响到原数据

浅拷贝只会拷贝对象的一级属性，拷贝之后的数据进行修改，也会影响到原数据中的数据

30.如何使用前端解决cookie的跨域问题 ？

access-control-allow-origin

在返回的header中加上

31.session Storage 和 local Storage的区别 ？

存储位置：都是再客户端浏览器

生命周期： session storage 是在当前会话期间有效 local storage 是永久保存

数据自动清除：session storage 关闭浏览器标签或会话结束时清除 local storage 需要手动清除或删除代码

存储容量：session storage 通常为5mb左右 local storage 通常为5mb 或更大

跨域访问制限制：session storage 同源策略限制，仅在同一窗口中共享数据，local storage 同源策略限制，在同一域名下的所有窗口中共享数据、

安全性：都是与浏览器的同源策略相同

数据类型：session storage 仅支持字符串 local storage 支持字符串和其他原生JavaScript数据类型‘

发送至服务器：都不会自动发送至服务器

使用场景：session storage 临时会话存储 local storage 长期本地存储

32.微任务和宏任务有哪些 ？

宏任务：整体代码script，setTimeout，setlnterval，setImmediate

微任务：promise，async/await，process，nextTick

33.同步和异步的区别 ？

同步：所有操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好

异步：不用等所有操作做完， 就相应用户请求。即先相应用户请求，然后慢看写数据库，用户体验感好

34.本地存储常用的是哪个 ？

本地存储常用的有 local storage ， session storage 和 cookie

35.存储的是哪种数据类型 ？

session storage 和 cookie 只支持存储字符串

local storage 支持字符串和其他的js 原生数据类型

36.管理员可以进行增删改查，其他账号只能查看怎么做 ？

1. 设计用户角色：确定系统中的用户角色，至少包括管理员和普通用户的两种角色
2. 实现权限控制：管理员角色授予可以增删改查的权限，而普通用户只能授予查看的权限
3. 用户认证与授权：当用户登录的时候，对其进行身份验证，并根据角色分配相应的权限
4. 编写代码逻辑：对于管理角色提供提供相应的增删改查接口；对于普通用户，只提供查看接口
5. 测试和验证：对系统进行检测，确保管理员可以增删改查；而用户只能查看数据

37.从代码云上拉取项目到本地 ？

1. 找到要拉取的项目页面，复制git 地址
2. 在本地打开终端
3. 用cd进入到想要进入到的文件夹目录
4. 在命令种输入 git clone git地址

38.为什么要用到深浅拷贝 ？

1. 处理嵌套对象：当一个对象嵌套另一个对象时，深拷贝可以确保把所有嵌套的对象都复制
2. 避免共享数据：如果多个对象共享一个数据源，那么对其中的一个对象进行修改就会影响到其他的对象
3. 保存对象状态：如果您需要保存对象的状态，然后一会儿还要恢复他们

39.get请求和post请求如何区分 ？

GET：

1. GET请求用于从服务器获取资源或数据
2. GET请求通过URL的查询参数将数据附加在URL后面
3. GET请求由于暴露在URL种，因此不适合传输敏感信息
4. GET请求可以被缓存

POST：

1. POST请求用于服务器提交数据
2. POST请求通过请求将数据发送到服务器
3. POST请求数据听过请求体传输，相比于GET更安全
4. POST请求不可以被缓存

40.promise的几种状态 ？

1. pending （进行中）
2. rejected （已失败）
3. fulfilled （已成功）

41.es6中有哪些新语法 ？

1. 块级作用域： let 和 const 关键词 用于声明块级作用域的变量和常量、
2. 箭头函数：使用 => 定义函数，简化函数的写法
3. 解构赋值：可以从数组或对象中提取值，并赋值给变量，使得变量的声明和赋值更加简洁
4. 默认参数：函数可以设置参数的默认值，当调用函数时不传递对应参数，将使用默认值
5. 拓展运算符：[...] 可以将数组，对象进行展开，方便进行拷贝，合并等操作
6. 模板字符串：使用反引号 可以在字符串中插入变量或表达式，以及换行和多行字符串的书写
7. 类和模块：使用class类关键字定义类
8. promise：引入promise 对象用于处理异步操作
9. 迭代器和生成器：使得遍历数据集合或实现可暂停的函数执行变得更加灵活和简单

42.es6中快速去重的方法 ？

使用set：

const arr = [1, 2, 2, 3, 3, 4, 5, 5];

const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用Array.from 和 set

const arr = [1, 2, 2, 3, 3, 4, 5, 5];

const uniqueArr = Array.from(new Set(arr));

console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用 filter

const arr = [1, 2, 2, 3, 3, 4, 5, 5];

const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

console.log(uniqueArr); // [1, 2, 3, 4, 5]

43.路由的两种模式及区别 ？

前端路由：

优点：

1. 用户体验好
2. 更好的交互性
3. 减少服务器负载

缺点：

1. 首次加载耗时
2. 不利于SEO

后端路由：
优点：

1. 利于SEO
2. 首次加载快速

缺点：

1. 页面切换较慢
2. 用户体验较差

44.promise中如何实现同步 ？

使用 async/await 它可以将promise的异步操作转换成同步操作

45.async/await如何使用 ？

1. 将异步操作封装在一个 async 函数中。async 函数是一个特殊的函数 它返回一个promise对象
2. 在 async 函数内部 ， 使用 await 关键字等待异步操作的完成
3. 将需要同步执行的代码放置在 await 关键字后面

46.promise中什么地方执行结果 ？

会在promise 对象的状态变为 resolved 或 rejected 时执行

47.出现过跨域问题吗，有什么解决方法 ？

在原有的代码中，添加一个import 和 app.use（）

48.git常见的命令 ？

git add . 提交

git commit -m “” 暂存区

git clone 克隆

git push 提交

git pull 拉取

git init 初始化

49.git使用的命令行还是可视化工具 ？

喜欢快捷，高效的方式，命令行可能更适合

便于操作，直观的方式，可视化工具更适合

50.路由传参有几种方式 ？

params 传参 ：属于路径的一部分，在配置路由的时候需要占位

query 传参：不属于路径的一部分，比如/home ？k=v&k=v ，不需要占位

props 传参：路由组件传参

51.传参方式有什么区别 ？

按值传递：使用这种方式 调用函数本身不对实参进行操作

地址传递：地址传递和按值传递的不同在于，它把实参的存储地址传给对应的形参

引用传递：引用为参数，则即可以使得对形参的任何操作都能改变相应的数据

52.参数丢失情况如何解决 ？

1. 检查参数命名：确保在函数定义和调用中使用相同的参数名称，以避免因为参数名称不一致导致的参数丢失
2. 检查参数位置：确认在函数调用时传递参数的位置和顺序与函数定义中的期望一致，避免参数位置错误导致的参数丢失
3. 使用默认参数：对于可选参数，可以在函数定义中设置默认值，以防止参数未传递而导致参数丢失

53.路由传参接收到的数据发生了什么变化 ？

1. 客户端将参数信息嵌入到URL中：在客户端发送请求时，会将需要传递的参数信息嵌入到URl中
2. 服务器端接收并解析URL中的参数信息：当服务器端接收到客户端的请求时，会从URl中解析出参数信息
3. 服务器端通过路由调用对应的处理函数：服务器端会根据URL中包含的路由信息，选择对应的处理函数来处理请求

54.假如一个接口返回了5个数据，要让他们第一行3个第二行2个排列怎么实现 ？

1. 将接口返回的数据存储到一个数组中。
2. 对数组进行分割，将前3个数据存储为一行，后2个数据存储为另一行。可以使用JavaScript中的slice()函数例如，在JavaScript中可以使用以下代码来进行分割：
3. javascript复制代码const data = [1, 2, 3, 4, 5];

const row1 = data.slice(0, 3); // 取出前3个数据

const row2 = data.slice(3); // 取出后2个数据

55.es6里面的forEach、map、filter有什么区别 ？

forEach ：

1.foreach用于对数组的每个元素执行指定的回调函数，没有返回值

forEach 方法没有返回值，它仅用于迭代数组的每个元素并执行给定的回调函数

2.map：

map 用于对数组的每个元素执行指定的回调函数，并将每次执行的结果组成一个新的数组

map返回一个新的数组，其中包含每次回调函数执行的结果

3.filter：

filter 用于根据指定的条件筛选数组中的元素，只保留满足条件的元素

filter 返回一个新的数组，其中包含满足条件的元素

• forEach用于遍历数组，但没有返回值，仅用于执行回调函数。
• map用于对数组的每个元素执行回调函数，并将每次执行的结果组成一个新的数组。
• filter用于根据指定条件筛选数组中的元素，返回满足条件的元素组成的新数组。

56.改变原数组的方法有哪些?

1. push：向数组末尾添加一个或多个元素。
2. pop：从数组末尾移除最后一个元素。
3. shift：从数组开头移除第一个元素。
4. unshift：向数组开头添加一个或多个元素。
5. splice：从数组中添加/删除元素。
6. sort：对数组进行原地排序。
7. reverse：原地反转数组元素的顺序。

57.要用哪些API，这些API的作用是什么 ？

1. Array API：用于操作数组。包括map、filter、reduce等方法，可以对数组进行映射、过滤、累加等操作。
2. String API：用于操作字符串。包括split、replace、match等方法，可以对字符串进行分割、替换、匹配等操作。
3. Object API：用于操作对象。包括assign、keys、values、entries等方法，可以对对象进行赋值、获取键、获取值、获取键值对等操作。
4. DOM API：用于操作HTML文档。包括querySelector、addEventListener、createElement等方法，可以获取文档元素、添加事件监听、创建元素等操作。
5. Fetch API：用于发送HTTP请求。包括fetch、Headers、Request、Response等方法和类，可以发送请求、设置请求头、获取响应等操作。
6. Promise API：用于异步编程。包括Promise、then、catch、finally等方法，可以处理异步操作的成功、失败和完成等状态。
7. Math API：用于数学计算。包括abs、ceil、floor、max、min等方法，可以进行绝对值、向上取整、向下取整、求最大值、求最小值等操作。

58.echarts有哪些配置项 ？

1. title：图表标题的配置项，包括主标题和副标题。
2. legend：图例的配置项，用于展示不同系列的标识和切换。
3. tooltip：提示框的配置项，用于显示数据项的详细信息。
4. xAxis 和 yAxis：坐标轴的配置项，用于定义 x 轴和 y 轴的类型、刻度、标签等。
5. color：颜色配置项，用于定义图表中的颜色主题。

59.es6处理异步的方法 ？

promise ：它可以将异步操作封装成一个promise 对象，并通过then和catch方法来处理异步操作的成功和失败状态

async/await：通过在函数前面加上async 关键字，可以声明一个异步函数。在异步函数内部，使用await 关键字可以暂停函数的执行，等待promise对象的解析结果

fetch api ：它提供了一个全局的fetch方法，可以返回一个 promise 对象，用于 处理异步的网络请求

60.promise的方法处理有什么区别 ？

then 和 catch 方法是基本的 Promise 方法，用于处理异步操作的成功和失败结果。finally 方法用于在 Promise 对象的状态确定后执行一些清理工作。all 方法用于等待多个异步操作全部完成，然后返回所有成功结果的数组。race 方法用于等待多个异步操作中的任意一个完成，然后返回该异步操作的结果

61.git从master分支切换到其他分支 ？

使用git checkout 用来切换到其他分支

1. 确保工作目录没有未提交的修改。
2. 使用 git checkout 命令切换到目标分支。
3. 确认切换后的分支正确无误。

62.扩展运算符有什么缺点 ？

不支持浅拷贝：使用扩展运算符进行对象拷贝时，它只会进行浅拷贝，而不是深拷贝。这意味着如果原始对象中包含嵌套对象或引用类型的属性，那么拷贝后的对象与原始对象仍然共享这些属性的引用。如果对拷贝后的对象进行修改，可能会影响到原始对象。

1. 不支持合并对象：当使用扩展运算符将多个对象合并成一个对象时，如果存在相同的属性名，后面的对象会覆盖前面对象的同名属性。这可能导致丢失一些数据，因为扩展运算符无法自动处理冲突。
2. 性能问题：在处理大型数组或对象时，使用扩展运算符可能会导致性能问题。因为扩展运算符会创建一个新的数组或对象，并将原始数据复制到新的数据结构中。在处理大规模数据时，这可能会占用大量内存，并导致性能下降。

63.如果我promise 请求接口 会获得的值对吧 但他在有时候return的时候没有值 怎么办？

为了解决这个问题，可以使用 Promise 的异步特性来等待接口响应后再返回值。可以使用 then 方法来设置 Promise 对象的回调函数，在接口响应后执行回调函数并返回响应结果。
function myPromiseFunction() {
  return new Promise((resolve, reject) => {
    // 发起接口请求
    fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(data => {
        // 在接口响应后解析数据并将其传递给 resolve 函数
        resolve(data);
      })
      .catch(error => {
        // 在发生错误时调用 reject 函数
        reject(error);
      });
  });
}

// 在使用 Promise 函数时，可以通过 then 方法获取返回的数据
myPromiseFunction().then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

64.你们用的git是什么 ？

是一个版本控制系统，可以在任何时间地点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新的记录回复回来

65.swiper 的工作原理知道吗 ？

1. 结构布局：在 HTML 结构中，Swiper 需要包含一个容器元素和若干个幻灯片元素。容器元素用于包裹幻灯片，并设置合适的样式。
2. 初始化：当页面加载时，通过 JavaScript 初始化 Swiper 实例。通过传递一些配置选项，例如幻灯片方向、滑动模式、自动播放等，来定义 Swiper 的行为。
3. 事件监听：Swiper 会监听用户的触摸、鼠标滚动等事件。当用户触摸或滑动屏幕时，Swiper 会检测并响应相应的事件。
4. 动画效果：根据用户的操作和配置选项，Swiper 会使用 CSS3 过渡动画或 JavaScript 动画来实现幻灯片的切换。这些切换可以是水平滑动、垂直滑动、淡入淡出等效果。

66.使用过less 和 sass吗 你知道他们的区别是什么 ？

语法差异：Less 使用类似 CSS 的语法，而Sass 使用缩进和特殊符号 来表示代码块和嵌套规则

文件扩展名：Less 文件通常使用 .less 扩展名，而sass 文件可以使用 .sass或 .scss 扩展名

兼容性：用于less 的语法更接近于标准的css，所以它在现有的css代码中更容易接近迁移

67.git 提交发生冲突 ？

1. 获取最新代码：在合并两个分支之前，需要确保你的本地分支是最新的版本。使用 git fetch 命令来获取最新代码。
2. 合并分支：使用 git merge 命令将两个分支合并到一个分支中。如果Git能够自动解决冲突，它会自动处理并合并提交。否则，会提示存在冲突，需要手动解决。
3. 解决冲突：手动解决代码冲突。打开文件，找到冲突的部分，并手动编辑代码。通常会标记出哪些代码需要被保留，哪些需要被删除，以及哪些需要被修改。
4. 提交代码：完成手动解决后，通过 git add 命令将修改后的文件添加到暂存区，再通过 git commit 命令提交代码。在提交时，可以包含一条描述性的提交信息，用来说明所做的更改。

68.路由跳转方式 ？

声明式跳转：使用 <router-link> 标签来声明跳转链接。这种方法通常用于单页面应用程序 (SPA)，它会自动处理路由跳转，避免了手动编写 JavaScript 代码的复杂性 <router-link to="/about">About</router-link>

编程式跳转：通过 JavaScript 代码来进行路由跳转。这种方法通常用于需要在特定事件触发时进行跳转的情况，比如表单提交后的页面跳转。例如：

69.es6中常用的数组方法 ？

Array.from()：将一个类数组对象或可迭代对象转换成一个真正的数组

const str = 'hello';

const arr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

Array.of()：创建一个包含任意数量参数的新数组

const arr = Array.of(1, 2, 3); // [1, 2, 3]

Array.prototype.find()：返回数组中满足条件的第一个元素，如果没有找到返回 undefined

const arr = [1, 2, 3, 4, 5];

const result = arr.find(item => item % 2 === 0); // 2

Array.prototype.findIndex()：返回数组中满足条件的第一个元素索引，如果没有找到返回 -1

const arr = [1, 2, 3, 4, 5];

const index = arr.findIndex(item => item === 3); // 2

70.谈谈你对 promise 的理解

promise是异步编程的一种解决方案，比传统的解决方案更合理更强大

Vue 面试题

1.v-for 的 key的作用是什么 ？

唯一标识符，方便查找

快速找到节点，减少渲染次数，提升渲染性能

2.key 为什么不用index

用index作为key时，在对数据进行，逆序添加，逆序删除等一些破坏顺序的操作时，会产生没必要的真是DOM更新，从而导致效率低

用index作为key时，如果结构中包含输入类的DOM，会产生错误的DOM更新

3.v-if 和 v-show 的区别

v-if 是直接删除DOM元素

v-show 是用css 的 display:none 隐藏掉DOM元素

4.vue双向绑定的原理

通过 Object.difineProperty劫持data属性的setter，getter

5.v-text 和 v-html 的区别

v-text 不可以解析标签

v-html 可以解析标签

6.vue 指令

v-text v-html v-show v-if v-for v-on v-model v-bind

7.计算属性和实例方法的区别

计算属性有缓存，而实例方法没有缓存

实例方法可以传递参数 但计算属性不能

8.事件修饰符

prevent，阻止默认行为

stop， 阻止事件冒泡

capture 冒泡改为捕获

self 只处理自己身上的事件，不理会冒泡或捕获

once 只执行一次

native 触发原生的事件

9.父传子 props

就是父组件给子组件传值的时候，把值直接传给子组件自己定义的属性,在子组件中定义props属性用来接收父组件传递的数据，在子组件的模板和函数中就可以使用数据

type，类型约束

default，指定默认值

required，指定该数据项是否必须传递

10.子传父 $emit

$ emit用于触发自定义事件。

通过$emit方法可以在组件内部触发一个自定义事件，并传递数据给父组件或其他监听该事件的组件。

使用$emit的语法为：this.$emit(eventName, data)，其中eventName为自定义事件的名称，data为要传递的数据（可选）

This.$parent(可以对父组件的数据进行操作)

11.ref

1、给dom节点记上ref属性，可以理解为给dom节点起了个名字。

2、加上ref之后，在$refs属性中多了这个元素的引用。

3、通过vue实例的$refs属性拿到这个dom元素

12.生命周期

创建前：beforeCreate 获取不到数据，也拿不到DOM元素

创建后：Created 可以获取到数据，但拿不到DOM元素

挂载前：beforeMount 可以拿到DOM 元素，但是DOM元素没有被解析

挂载后：Mounted 可以拿到DOM元素，DOM元素被解析了

更新前：beforeUpdate 数据改变了，DOM没有发生变化

更新后：Updated 数据改变了，DOM也发生了变化

销毁前：beforeDestroy 所有的事件监听和实例都可以用

销毁后：Destroyed 所有的事件监听和实例都被销毁

13.插槽

默认插槽：
    在子组件中定义一个插槽
具名插槽：
         在子组件中定义插槽时，给对应的插槽分别起个名字，插入到父组件时候给  <template> 添加一个v-slot 用来放子组件的起的名字，v-solt 只能添加在一个<template>上
作用域插槽：
    在子组件自行决定自己要显示什么内容，<slot  :obj="obj"></slot>      
    父组件：<template>
    <children v-slot="slotProps">
        <p>one插槽{{slotProps.obj.name}}</p>
    </children>
</template>
插槽的内容中有需要访问到子组件里面的内容，类似子组件里的slot可以绑定一些当前作用域，从而传出来，使用组件时，插槽的内容就可以拿到slot传出来的数据,父级的插槽内容可用。


插槽是让父组件向子组件指定位置插入html结构，也是一种组件通信的方式。
-默认插槽/不具名插槽
	c:<solt><solt> f:<child>xxxxxx</child>
	子组件中只能定义一个插槽模块
-具名插槽
	c:<solt name="demo"></solt> f:<child><div solt="demo">xxx</div></child>
	在使用<template></template>标签时可写成
	f:<child><template v-solt:demo>xxx</template></child>
-作用域插槽
	c:<solt :a='b'></solt>
	f:<template scope='c'></template>
	或<template slot-scope='c'></template>
	作用域插槽是数据在插槽子组件时，无法在插槽使用者父组件中获取得到数据，可以用scope来传递数据，接收时必须用template标签包裹结构。

14.watch监听

监视数据的变化

deep ： true | false 深度监听

15.路由传参

this.$router.push() 是可以返回上一页的、

this.$router.replace()不能返回上一页

16.动画

v-enter：定义进入过渡的开始状态

v-enter-active：定义进入过渡生效时的状态

v-enter-to: 定义进入过渡的结束状态

v-leave: 定义离开过渡的开始状态

v-leave-active：定义离开过渡生效时的状态

v-leave-to: 定义离开过渡的结束状态

17.$route 和 $router的区别

route：是一个当前路由信息的对象

router：是实例对象

$router是用来操作路由，$route是用来获取路由信息

18.$route的属性

主要的属性有：

this.$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews

this.$route.params 对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面

this.$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面

this.$route.router 路由规则所属的路由器

this.$route.name 当前路由的名字，如果没有使用具体路径，则名字为空

19.路由守卫

1.全局路由守卫：

beforeEach(to, from, next) 全局前置守卫，路由跳转前触发

beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发

afterEach(to, from) 全局后置守卫，路由跳转完成后触发

2.路由独享守卫

beforeEnter(to,from,next) 路由对象单个路由配置 ，单个路由进入前触发

3.组件路由守卫

beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发

beforeRouteUpdadte(to,from,next) 当前路由改变时触发

beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发

4.参数

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

from： 即将要离开的路由对象

next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径

20.router-link属性

to：用于指定跳转的路径

tag：可以指定router-link之后渲染成什么组件默认渲染出的是a

active-class：给指定路由起名字

21.Vuex五大特性

1. state 数据存储
2. getters 计算属性
3. mutations 更改state状态
4. actions 提交mutation异步操作
5. modules 模块化

22.vue中数据传递的方式

props 父传子

$emit 子传父

slot 插槽

vuex

$bus

23.没有关系的组件之间数据如何传递

可以使用vue的事件总线或者是vuex，全局事件总线也可以

1.事件总线：

可以创建一个空的vue实例作为事件总线，用于在不相关的组件之间进行通信

// 创建事件总线

const bus = new Vue();

// 发送事件

bus.$emit('event-name', data);

// 接收事件

bus.$on('event-name', (data) => {

// 处理接收到的数据

});

2.vuex状态管理：

如果需要在相关的组件之间共享状态，可以使用vuex进行状态管理。将需要的共享数据存储在vuex的store中，然后在各个组件中通过mutations或actions来修改和获取这些数据

3.全局事件总线：

也可以简单地使用vue实例作为全局事件总线，在main.js中创建一个空的vue实例，并将其作为vue的原型属性

24.vue2和vue3的区别

生命周期的变化：

vue3大部分的名字需要加上on 使用vue3组合式API需要先引入；vue2选项API则可以直接调用

v3没this直接value

vue2的双向数据绑定是利用了object.definepropert对数据进行劫持

vue3的双向数据绑定使用的是proxy，definepropert对数据进行劫持，不能全局监听，可以省去for in闭包等一些内容来提升效率

vue2是把数据放入data中，vue3需要使用一个新的setup（）方法

1.源码组织方式变化:使用 TS 重写

2.支持 compositionAPI，基于函数的 api，更灵活组织组件逻辑(Vue2 使用 options api)

3.响应式系统提升: Vue3 的响应式数据原理改成了 Proxy，可以监听动态新增删除属性，以及数组变化

4.编译优化: Vue 通过标记静态根节点来优化 Diff，Vue 则标记和提升所有静态根节点，Diff 的时候只需要去对比动态节点的内容

5.打包体积优化: 移除了一些不常用的 api(inline-template,filter)

6.生命周期的变化，使用 setup 替代了 beforeCreate 和 created

7.template 支持多个根标签

8.Vuex 状态管理，创建实例的方式，Vue2 使用 new store; Vue3 使用 createstore:

9,Route 获取页面实例以及路中信息,Vue2 使用 this 的万式获取;而 Vue3 采用etCurrentInstance/userRoute,userRouter的方式来获取

10.对 props 的使用: Vue2 通过 this 的方式使用;Vue3 则直接通过 props 使用;

vue2	vue3
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onmounted
beforeUpdate	onBeforeUpdate
updated	onupdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

25.vue中的data为啥是一个函数

1. vue中组件是复用的，为了防止data服用，将其定义为函数
2. vue组件可能存在多个实例，如果使用对象形式，会导致多个组件公用一个data，从而使一个组件影响其他组件
3. 如果函数定义，会返回一个全新的对象，避免了组件之间data的互相影响

26.$set是干什么的

当数据变化但没有更新视图时使用，例如对象新增加的属性，数组新增加的成员

27.为什么不能v-for和v-if一起使用

v-for 优先级是比 v-if 高

永远不要把 v-if 和 v-for 同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断

28.vue中的虚拟dom

vue中状态变化时，只能通知到组件，组件内部的变化需要通过虚拟DOM去进行比对与渲染

29.计算属性与监听属性的区别

计算属性无法开启异步任务，watch可以开启异步任务

计算属性有缓存机制，watch没有缓存机制

计算属性可以完成的功能watch都可以完成，而watch能完成的计算属性不一定能完成

计算属性的计算结果受其依赖属性的影响，watch的改变可以影响依赖属

30.vuex如何使用

1. 先安装vuex
2. 创建一个store 在vue项目中创建一个新的js文件，在这个文件中创建一个vuex store实例，包括state，mutations，actions，getters
3. 将store注入到vue应用中
4. 在组件中使用store

31.vuex中的存储方式和本地存储的区别

作用域：
Vuex存储：Vuex中的状态是全局的，存储在内存中

本地存储：本地存储通常是指浏览器提供的 local storage 和 session storage 它们存储在客户端的浏览器中

持久性：
Vuex存储：Vuex的状态是在内存中管理的，页面刷新或关闭后状态会重置

本地存储：localStorage 中存储的数据会持久保存在客户端，即使页面被关也不会丢失，除非进行清楚操作

响应式：

Vuex存储：Vuex中的状态是响应式的，当状态发生变化时，相关的试图会自动更新

本地存储：本地存储的数据变化不会触发视图的自动更新，需要手动监听存储事件并进行处理

适用场景：

Vuex存储：适合管理一些大型的需要进行状态统一的状态管理和控制

本地存储：适合存储少量的用户配置信息，表单数据，用户偏好设置等，并且需要在页面刷新后保持状态

32.页面加载可以用到那几个钩子函数

beforecreate

created

beforemount

mounted

33.vue的优点是什么

1. 易学易用：国人开发，中文文档，不存在语言障碍，易于理解和学习
2. 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb
3. 双向数据绑定

34.如何在created里操作DOM

在标签里加上ref属性然后在created里 this.$nextTick就可以操作DOM

$nextTick

35.vuex中action和mutation有何区别？

action中处理异步，mutation不可以

mutation做原子操作，action可以整合多个mutation

36.过滤器

ilters

主要用于在数据传输和处理的过程中对数据进行处理或拦截

37.三次握手和四次挥手

第一次握手：服务器知道自己接受能力正常，客户端知道自己发送能力正常。

第二次握手：客户端知道服务器收发能力正常，自己收发能力正常；服务器知道自己收发能力正常，不知道客户端的接收能力正常，因此需要第三次握手

第三次握手：服务器可以确定客户端收发能力正常；第三次握手可以携带数据

第一次挥手：主动关闭TCP连接，不再发送数据，但可以接收服务器发来的报文

第二次挥手：客户端知道服务器端接到自己的断开连接请求，TCP处于半关闭状态，但服务器端可能还有数据要传输

第三次挥手：服务器关闭客户端连接，等待客户端回应

第四次挥手：等待足够的时间确保TCP接收到连接中断请求的确认

38.为什么挥手比握手多一次

因为握手的时候并没有传输数据，所以服务端的SYN和ACK（确认请求）报文可以一起发送，但是挥手的时候有数据在传输，所以ACK和FIN报文不能同时发送，需要分两步，所以会比握手多一次

39.vue使用的是什么模式？请具体介绍一下这种模式

渐进式开发，采用mvvm的模式

model (模型层) axios data vuex(state)

view (视图层) template < template>< /template>

viewmodel（传递者）是双向绑定实现的机制

延伸问题：什么是渐进式？Vue渐进式-先使用Vue的核心库，再根据你的需要的功能再去逐渐增加加相应的插件。（没有多做职责之外的事。

40.

微信小程序面试题

1.view和block的区别

1. <view> 是一个组件，它可以在页面上做渲染
2. <block> 不是组件，它只是一个包装元素；它不会在页面中做任何的渲染，它只接收控制属性

2.import 和 inclued 的区别

import 引入templa的内部的

inclued 引入template的外部

3.bindtap 和 catchtap

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

4.微信小程序的双向绑定和vue的双向绑定的区别

1. 实现方式不同：小程序的双向绑定是基于数据绑定和事件绑定实现的，而 Vue 的双向绑定则是基于difineProperty劫持data属性的setter，getter
2. 语法不同：小程序的双向绑定使用的是类似与 Angular JS 的ng-model的语法

即value={{data}} bindinput="setData"，而vue的双向绑定是v-model语法

3 . 性能不同：vue的双向绑定通过数据劫持，小程序的双向绑定则需要通过事件绑定和数据绑定实现

4 依赖不同：vue的双向绑定依赖于vue.js框架，小程序的双向绑定是微信小程序原生支持的功能

5.微信小程序有哪些传值方式

URL 参数传递

Storage 存储

全局数据传递

事件传递

页面栈传递

6.bintap 和 catchtap 的区别

如果希望点击事件能够向上冒泡并被父级元素捕获处理，则应该使用 bindtap，如果希望阻止点击事件冒泡，则应该使用 catchtap

7.wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？

wx.navigateTo() 父页面跳到子页面，可返回上一级

wx.redirectTo() 关闭当前页面，不能返回上一级

wx.switchTab() 跳转到tabBar页面，并关闭其他所有非tabBar页面

wx.reLaunch() 1.1.0关闭所有页面，打开到应用内的某个页面

wx.navigateBack() 关闭当前页面，返回上一个页面。如果当前页面是通过 wx.navigateTo() 或 wx.redirectTo() 打开的，则返回到打开该页面的原页面，如果当前页面是 TabBar 页面，则返回到上一个 TabBar 页面。这种方式适用于返回上一个页面的情况

8.微信小程序的rpx和px的区别

1rpx = 0.5 px

9.微信小程序的生命周期

App生命周期：

App生命周期主要包括onLaunch和onShow两个函数，分别在小程序初始化时和进入前台时触发。

onLaunch(options)：小程序初始化时调用，可以获取打开小程序的场景值、query参数等。

onShow(options)：小程序启动或从后台进入前台时调用，可以获取打开小程序的场景值、query参数等。

Page生命周期：

Page生命周期主要包括onLoad、onShow、onReady、onHide和onUnload五个函数，分别在页面加载、页面显示、页面初次渲染完成、页面隐藏和页面卸载时触发。

onLoad(options)：页面加载时调用，可以获取上个页面传递的参数等。

onShow()：页面显示时调用。

onReady()：页面初次渲染完成时调用。

onHide()：页面隐藏时调用。

onUnload()：页面卸载时调用。

Component生命周期：

Component生命周期主要包括created、attached、ready、moved和detached五个函数，分别在组件创建、组件添加到页面、组件初次渲染完成、组件移动和组件从页面中移除时触发。

created()：组件实例刚刚被创建时调用，可以在这个函数中定义组件的数据和方法等。

attached()：组件被添加到页面中时调用。

ready()：组件初次渲染完成时调用。

moved()：组件被移动到另外一个节点时调用。

detached()：组件被从页面中移除时调用。

error: 每当组件方法抛出错误时间

uniapp 面试题

uniapp中实现页面跳转

navigateTo

redirectTo

reLaunch

switchTab

navigateBack

uniapp实现数据绑定

使用双括号{{}}进行数据绑定，将数据

uniApp中如何发送网络请求

可以使用uni.request方法发送网络请求，通过设置url、method、data等参数来实现不同的请求

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});