1、数组方法
① find与findIndex，查找数组中符合条件的元素，返回这个元素或index索引值。
② splice删除（a，b），以索引值为起点删除b个 //改变原数组
2.axios实际上是一个基于Promise的构造函数，axios的实例：通过axios的create方法创建
let instance = axios.create({
// 接口根路径
baseURL: baseURL,
// 请求超时时间
timeout: 20000, //
});
实例对象中有众多属性和方法，.
defaults
defaults 是一个对象，包含了该 axios 实例的默认配置。可以通过它来设置全局配置，包括基础 URL、请求头、超时设置等。这个属性会被所有通过该实例发出的请求所继承。
baseURL: 请求的基础 URL（如'https://api.example.com'）。headers: 默认请求头，通常用于设置如Authorization等全局 HTTP 头部。- 其中defaults.headers还有默认属性common、post、get等，修饰此语句对请求头的限定范围，如common修饰所有，get只修饰get请求
timeout: 请求的超时时间，单位为毫秒。
2. interceptors
interceptors 是一个包含请求和响应拦截器的对象，可以对请求或响应进行预处理或后处理。
interceptors中的方法:
request: 用于在请求发送之前修改请求的配置或进行某些操作。
response: 用于在响应到达客户端之前修改响应数据，或者在发生错误时处理响应。
响应拦截器举例
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
do......
// 在发送请求之前进行操作
return config;
},
function (error) {
do......
// 对请求错误进行操作
return Promise.reject(error);
}
);
方括号表示法
let person = {
name: 'Alice',
age: 30
};
const a='age'
// 使用字符串作为键名
console.log(person['name']); //输出Alice
console.log(person[a]) //输出30
强制类型转换
let a = '123'
console.log(Number(a)) ///输出123
Vue获取当前路由url的相关参数
利用useRoute 是这一Vue Router 4 提供的 Composition API 函数，它返回当前的路由对象，包含路径、查询参数、路由参数等信息
const route = useRoute()
console.log(route) //得到以下对象
{
path: "/products",
params: {}, //路由动态传参传入的参数
query: {
id: "123" //假设URL:http://example.com/products?id=123,则route.query,id=123,即URL 中查询字符串 ?key=value
},
hash: "#details",
fullPath: "/products?search=shoes&id=123#details",
name: null // 如果没有指定路由名称
}
js的解构
JavaScript 中的解构（destructuring）是一种方便的语法，它允许你从对象、数组中提取值，并将它们赋给变量
const person = {
name: "John",
age: 30,
city: "New York"
};
// 解构赋值
const { name, age, city } = person;
console.log(name); // John
console.log(age); // 30
console.log(city); // New York
//也可以部分结构
const { data } = person
也可以对变量名进行重新命名
const person = {
name: "John",
age: 30,
city: "New York"
};
// 解构时重新命名
const { name: fullName, age: years, city: location } = person;
console.log(fullName); // John
console.log(years); // 30
console.log(location); // New York
解构数组
const arr = [1, 2, 3];
// 解构数组
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
Promise浅析
建议看源码理解，因为实在太复杂了
promise实例在pending状态下，promise.then()仅仅是在宿主环境中保存下来，待到从pending转化为fulfilled状态，再把promise.then()的回调函数推入微任务队列
懒加载及实现方法
懒加载（Lazy Loading），也称为延迟加载，是一种将资源（如图片、组件等）推迟到需要的时候再加载的策略，可以显著提升大型应用的加载速度和性能。
实现方法
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
},
import()函数用于异步加载组件。当路由被访问时，才会加载对应的组件文件
template
<template>是一个包装元素，用于在Vue模板中包裹内容，但它本身不会在最终的DOM输出中渲染为实际的HTML标签。常用于条件渲染
v-if和v-else
标签内使用的 v-if 和 v-else 指令是通过它们在模板中的顺序来配对的,必须紧挨使用
v-if与v-show的区别
渲染方式
-
v-if：
- v-if 是基于条件的“惰性渲染”。这意味着如果条件为假，则相关的组件或元素将不会被渲染到 DOM 中。
- 当条件为真时，元素会被渲染到 DOM 中，并且如果条件变为假，DOM元素会被销毁，同时它的事件监听器和子组件也会被销毁。
-
v-show：
- v-show 只是通过 CSS 的 display 属性来控制元素的显示和隐藏。
- 无论条件为真还是为假，元素都会被渲染到 DOM 中，只是 display 属性会被设置为 none（隐藏）或恢复为原来的值（显示）。
- 元素的事件监听器和子组件在条件切换时不会被销毁。
使用场景
- v-if：适用于条件不经常改变的场景，或者在条件为假时需要减少不必要的渲染和内存占用的场景。
- v-show：适用于需要频繁切换显示状态的场景，或者当元素的渲染开销较大且希望避免重复渲染时。
- 对于
<template>标签，只适用v-if，v-show不适用，因为<template>本身不会在 DOM 树中渲染为实际的 HTML 元素，因而无法对其应用 v-show控制其css的display属性
CSS中常用的长度单位
1.px(绝对单位）
2.vw: 当前视口的宽度的百分比数，vh: 当前视口的高度的百分比数
3.em:当前D节点的字体大小为1em
4.rem：根DOM元素<html>的字体大小为1rem
5.% 占父级元素的百分比
正则表达式
作用：是一种模式匹配工具，对字符串进行查找
构成：（1）普通字符：能够描述其本身，例如所有的字母和数字
（2）元字符：：在正则表达式中具有特殊意义的专用字符，可以用来规定其前导字符（即位于元字符前面的字符）在目标对象中的出现模式
- .：匹配除换行符以外的任意单个字符。
^：匹配字符串的开始位置。$：匹配字符串的结束位置。*：匹配前面的字符零次或多次。+：匹配前面的字符一次或多次。?：匹配前面的字符零次或一次，或者用于非捕获组匹配{n}：匹配前面的字符恰好 n 次。{n,}：匹配前面的字符至少 n 次。{n,m}：匹配前面的字符至少 n 次，但不超过 m 次。[]：匹配括号内的任意一个字符（字符集合）。|：表示逻辑“或”操作，匹配左右两边的表达式之\转义字符。例如\w表示字母数字和下划线中的任意一个，\W表示\w的反义词（即补集），\d表示0-9中的任意一个，\D表示除了数字以外的任意一个字符，\s表示空格，\S表示除空格之外的任意字符，\b表示单词的边界。
vue3生命周期（组合式api）
setup：组件实例未被创建，所以无法调用this，用于设置响应式数据、方法等
onBeforeCreate：和setup功能重叠，也是初始化响应式数据和方法
onCreated：组件已经被实例化，方法，变量均可以被调用拿到，此时已经完成了组件的实例化，即模块被编译完成了，已经存在了render函数（render函数的生成在组件实例化后生成，即组件实例化过程完成了模块的编译和解析），有了render函数即已经生成了虚拟dom树，因为render函数返回值就是虚拟dom树
onBeforeMount：组件被挂载到指定的DOM元素之前。此时组有了虚拟DOM树，但Vue还尚未根据虚拟DOM树创建对应的真实DOM树，因此无法访问真实的DOM元素。
//注释：
①挂载：当虚拟DOM树被构建并准备好后，vue会根据虚拟DOM树构建真实DOM树，vue会将真实DOM树挂载到某个指定的DOM元素上，这个过程通常称为“挂载”（生成真实DOM树再挂载到指定的DOM元素上）
②渲染函数：Vue首先会将其组件模板（可以是HTML字符串或内联模板）编译成一个渲染函数。这个渲染函数是一个纯JavaScript函数，它接收组件的数据作为输入，并返回一个虚拟DOM树（即返回虚拟DOM）
onMounted：在组件挂载到某个指定的DOM元素之后调用，此时组件的真实DOM树已经生成，并将真实DOM树挂载到指定的DOM元素上，可以进行DOM操作，浏览器DOM树和渲染树的依次开始构建，。
onBeforeUpdate：在组件更新之前调用，此时组件模版中的数据已经发生变化，变化后的组件模板已经被重新编译成渲染函数（返回了新的虚拟DOM树，生成了新的虚拟DOM树之后立刻执行diff算法，找出新虚拟DOM树和旧虚拟DOM树的差异信息，把这些差异信息存储到一个patch（补丁）对象），但尚未解析patch对象以更新真实DOM树中。在这个阶段，可以访问到组件模版中的最新的组件数据，但真实DOM树还未更新。
onUpdated：在组件更新之后调用，此时patch对象已经解析为若干具体的DOM操作来更新真实DOM树，组件的数据已经重新渲染到真实DOM树上。在这个阶段，可以对更新后的DOM进行操作。
onBeforeUnmount：在组件卸载之前调用。此时组件仍然是活跃的，可以进行清理操作，如清除定时器、取消事件监听等。
unmounted：在组件卸载并移除DOM后调用。此时组件已经被销毁，无法再访问组件的属性和方法。在这个阶段，可以进行一些清理工作，如释放资源等。
vue的插槽
定义：Vue插槽（Slots）是Vue.js框架中的一种重要机制，它允许父组件向子组件传递内容，并在子组件中指定这些内容的显示位置
使用：以为父组件传递的多个内容可能在子组件的不同位置呈现，所以多用具名插槽
具名插槽
-
定义与用途：
- 具名插槽允许在子组件中使用多个插槽，并为每个插槽指定一个名称。
- 这样，父组件就可以向不同的插槽传递不同的内容，从而实现更复杂的布局和内容组合。
-
使用方式：
- 在子组件中，使用
<slot>标签定义插槽，并通过name属性指定插槽的名称。 - 在父组件中，使用
<template>标签和v-slot指令（或简写为#）来指定要插入到哪个具名插槽中的内容。
- 在子组件中，使用
<!-- 子组件 -->
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<slot></slot> <!-- 默认插槽 -->
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<!-- 父组件 -->
<template>
<child-component>
<template v-slot:header> //或写成#header
<h1>这是头部内容</h1>
</template>
<p>这是默认插槽的内容</p>
<template v-slot:footer> //或写成#footer
<p>这是底部内容</p>
</template>
</child-component>
</template>
watch和watchEffect
1.二者均是vue中响应式的监听数据的API
2. watch：通常需要传入两个参数，第一个参数是说明什么状态应该触发侦听器重新运行（可以是一个 getter 函数、响应式引用、响应式对象或数组等），第二个参数是定义侦听器回调函数的函数，该回调函数可以接受两个参数，分别指向状态变化前后的值。
watchEffect：只接受一个回调函数作为参数，该回调函数会在其依赖的响应式数据变化时重新执行。由于它不需要显式指定依赖项，因此使用起来更加简洁和直观。
3.wacth具有惰性，在页面刚加载时不会触发，只在数据变化时触发进行检测；watchEffect，不具有惰性，在页面加载后立即进行检测
关于css书写方向
margin： 0 auto； 上下、左右 margin：0 auto 0； 上、左右、下 margin:0 0 20px 20px；上、右、下、左
vue3的编译宏
编译宏是一种特殊的代码片段，由编译器在编译阶段预处理，进而转化为其它代码，所以在浏览器环境运行的最终代码不包括编译宏的原始调用。
好处是简化代码，减少重复，因为代码最终不包含宏的原始调用，所以减少运行时的开销
CSS transition过度的时间函数
ease：开始时速度较慢，然后加速，最后再减慢。ease-in：开始时速度较慢，然后逐渐加速。ease-out：开始时速度较快，然后逐渐减速。ease-in-out：开始时速度较慢，中间加速，然后再减慢。linear：线性平缓的过渡
Css的float属性
浮动（float）：是元素脱离文件流，但不会完全脱离，它允许元素向左或向右移动，直到其外边缘碰到包含框或另一个浮动元素的边缘。不完全脱离即体现在他也会与边框内其他的浮动元素相互影响。
CSS的box-shadow属性
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
三个值分别为 阴影在x方向上的偏移量，阴影在y方向上的偏移量，阴影的模糊半径。越大阴影越柔和，越小越锐利
vue3 watch的底层实现
1.watch的入口函数
function watch( source, callback, options )
//source为监听的数据，callback回调函数是数据变化时的操作，option是一个可选的配置对象，如immediate、deepd等选项
{
// 一系列处理逻辑
}
2、处理数据源
watch 函数根据响应式数据源类型的不同（数据可能是ref类型的响应式数据。 reactive类型的响应式对象。 一个或多个响应式数据源组成的数组。 一个返回响应式数据的getter函数。），watch会将数据源转换为一个getter函数， 这个getter函数会在需要时读取数据源的值。
以数据源是一个getter函数或者响应式对象为例
function watch( source, callback, options )
{
let newValue
let oldValue
let useGetter
if( typeof source ==='function'){
useGetter == source
}
if( typeof source ==='Object'){
useGetter == ()=> source
}
3.收集数据源中数据的依赖、执行回调函数
把回调函数callback 包装在一个effect副作用函数中。这个副作用函数会被添加到响应式系统的依赖收集器中。
实际上watch就是把effect重新封装，加入了更丰富的操作
effect 函数的主要作用是创建一个副作用（即通过观察数据变化执行某些逻辑）。在 effect 中，Vue 会自动收集你在副作用函数中访问的响应式数据，并跟踪这些数据之间的依赖关系。当这些数据发生变化时，effect 会自动重新执行。
function watch( source, callback, options )
{
let newValue
let oldValue
let useGetter
if( typeof source ==='function'){
useGetter == source
}
if( typeof source ==='Object'){
useGetter == ()=> traverse(source) //traverse是一个递归函数，用于递归遍历对象的所有属性
}
effect(() =>{
oldValue = newValue
newValue = useGetter()
})
4. 配置选项（options）处理细节
deep选项
如前面所述，当deep为true时，对于reactive对象，会深度递归遍历其属性来建立响应式监听。用traverse遍历对象所有属性来实现该效果
immediate选项
如果immediate为true，在watch创建初始化时就会立即执行一次callback函数。在源码里，会有专门的逻辑判断来识别这个配置，当检测到immediate为true时，会主动调用callback，并按照规则传递初始值作为新值
