前端

html、css

HTML5 新特性

绘画的 canvas 元素
媒介回放的 video 和 audio 元素
SVG
语义化标签 ：header、main、footer、aside
拖放属性 :<div draggable="true"></div>
html5修改一些新的input输入特性，改善更好的输入控制和验证：
    calendar、date、time、email、url、search
本地离线存储

css3 新特性

1.选择器
    伪类选择器 、 属性选择器
2.圆角 border-radius
3.透明度 opacity: 0.1
4.盒阴影  box-shadow
5.弹性盒 display：flex
6.盒模型 box-sizing
    border 和 padding 不会计算 在宽高中
7.过渡
8.渐变
9.透明度 rgba

BFC

块级格式化上下文

BFC是一块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

·设置浮动 float，不包括none
·设置定位（绝对定位或固定定位），absoulte 或者 fixed
·行内块显示模式，inline-block
·设置 overflow，即 hidden，auto，scroll
·表格单元格，table-cell
·弹性布局，flex

特性：
1.同一个 BFC 下外边距会发生折叠

2.BFC 可以阻止元素被浮动元素覆盖

3.BFC 可以清除浮动

回流和重绘

回流：

    页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面

    1、第一次渲染页面（内容和文字等都发生改变）。
    2、浏览器窗口尺寸的改变。
    3、页面元素（图片，文字）位置和大小尺寸的改变。
    4、新增和删除可见元素。
    5、一些style属性发生变化导致元素变化：（如边框，下划线，css伪类）

重绘：

    页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color，则就叫称为重绘

区别：

他们的区别很大：

 回流必将引起重绘，而重绘不一定会引起回流。

 比如：    只有颜色改变的时候就只会发生重绘而不会引起回流
          当页面布局和几何属性改变时就需要回流

 比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变



 如何避免和减少回流和重绘
    1、减少dom和样式的修改，不多次修改样式
    2、样式集中，尽量使用外部样式表和外部js，读写分离，这样有利于服务器和浏览器缓存
    3、能使用css的就不用js操作样式：（每次js操作都会导致重绘或者回流）
    4、页面中多次需要重排的元素，position使用 absolute 或 fixed
    5.尽量不使用表格布局（无定宽高的表格宽高由最后一行决定，绘制到最后一行不合理的时候会反复进行计算回流）

溢出省略号

单行溢出隐藏
width:??px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis


多行溢出隐藏
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2:

水平垂直居中有哪些方法

1.绝对定位方法：确定了当前div的宽度，设置绝对定位，left为50% ，top为50%，
margin-left和margin-top的值为当前div宽度一半的负值 div { width:600px; height: 600px; background:red;
position: absolute; left:50%; top:50%; margin-left:-300px; margin-top:-300px; } 2.绝对定位
：设置绝对定位，上下左右为 0 ，margin ：auto 3.弹性盒子 div { height:800px; display: flex;
justify-content: center; align-items:center; } 4.绝对定位 + transform （过渡），将 translate
设置为-50% (不知道宽高) div { position: absolute; left: 50%; top: 50%; transform:
translate(-50%,-50%) } 5.table 布局 将父元素设置 display:table-cell 子元素设置 display: inline-block

css 中实现元素隐藏的几种方法

1. display : none

2. visibility : hidden

3. opacity : 0

4. position  :  利用定位将元素的top和left值设为足够大的负数，使它移出屏幕在屏幕上看不见

5. overflow : hidden

6. z-index: 负值

7. transform: scale(0,0)：将元素缩放为 0

8. height、width 为 0

display:none 与 visibility:hidden 的区别

display:none , 元素会被隐藏，不会占空间

visibility:hidden，元素会被隐藏，但还是会占空间

CSS 中可继承与不可继承属性有哪些

无法继承：宽、高、padding、margin、border、background、定位

可以继承：font-size、line-height、color、text-align

定位

relative ：相对定位，相对于其原来的位置进行定位

absolute ：相对于没有定位以外的一个父元素进行定位

fixed ：固定定位 ，相对于屏幕视⼝（viewport）的位置来指定元素位置

sticky ：粘性定位

画一条 0.5px 的线

缩放
transform: scale(0.5,0.5);

设置元素为浮动后，display 的值

设置元素为浮动后，display 的值是 block

px、em、rem、vw/vh 各自代表的含义？

px：绝对单位，页面按精确像素展示

em：相对单位，如果自身定义了 font-size 按自身来计算,如果自身没有，则以最近父节点字体的大小，整个页面内1em 不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点 html 的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

js

闭包 ：有权访问另一个函数作用域中的变量的函数

特点：

    函数嵌套函数

    函数内部可以引用函数外部的参数和变量

    参数和变量不会被垃圾回收机制回收

优点：避免全局污染 ，保护私有变量 ，延长了变量的生命周期

缺点：处理不当，容易造成内存泄漏

应用：防抖

js 垃圾回收机制

JS的垃圾回收机制是为了以防内存泄漏

JS有两种变量，全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了，此时便可将它引用的内存释放（即垃圾回收），但全局变量生命周期会持续到浏览器关闭页面

现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除（mark and sweep）、引用计数(reference counting)。

js 关键字

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

浅拷贝、深拷贝

基本数据类型：数据存储在栈中。

引用数据类型：数据存放在堆内存中，栈中存放了一个引用地址，指向堆内存中的数据。



浅拷贝是复制,两个对象指向同一个地址

深拷贝是新开栈,两个对象指向不同的地址



浅拷贝：只拷贝对象的引用、而不深层次的拷贝对象的值，引用指向的是同一个对象，多个对象指向 堆内存 中的同一对象，任何一个修改都会使得所有对象的值修改，因为它们公用一条数据

    Object.assign 第一层是深拷贝,第二层是浅拷贝

    concat（）

    slice（）


深拷贝：将引用类型的值全部拷贝一份，形成一个新的引用类型，在堆内存中重新开辟一个空间，数据发生变化，不会修改原数据

拷贝的是他们的引用地址，数据发生变化，不会修改原数据

    Object.assign()  这种方式第一层是深拷贝,第二层是浅拷贝

    ES6扩展运算符

    JSON.parse(JSON.stringify(obj1)); 但是这种方式存在弊端，会忽略undefined、symbol和函数

    函数库 lodash 的_.cloneDeep方法

    递归拷贝

字符串方法

split()   把字符串分割为子字符串数组

slice()   提取字符串的片断，并在新的字符串中返回被提取的部分

charAt()  返回指定索引位置的字符

concat()  连接两个或多个字符串，返回连接后的字符串

indexOf() 返回字符串中检索指定字符第一次出现的位置

match()   找到一个或多个正则表达式的匹配

replace() 替换与正则表达式匹配的子串

trim()    移除字符串首尾空白

toString() 返回字符串对象值

toUpperCase()   把字符串转换为大写

原型、原型链

原型：即构造函数的 prototype 属性，每个函数都有一个 prototype 属性，指向生成该函数的原型对象
原型链：每个对象都有一个 proto 属性,指向生成该对象的原型对象（这样我们就找到了是哪个对象生成了该对象）

原型链一般用于继承，原型链的核心就是依赖对象的 proto 的指向，当自身不存在属性时，就一层层往上找，直到找到 Object.prototype
因为 _proto_ 实质找的是 prototype ，所以我们只要找这个链条上的构造函数的原型（prototype）

继承: 让一个构造函数去继承另一个构造函数的属性和方法

1.原型链继承 ：继承父类构造函数原型上的属性和方法

3.借用构造函数继承

3.组合继承： 原型链继承 和 借用构造函数继承

4.ES6继承方法 ：
    extends
    super关键字，它指向父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错

this 指向

全局作用域下，指向 window

函数作用域下：

    非严格模式：指向 window

    严格模式下，为 undefined

对象中，指向当前该对象

普通函数调用 ：指向 window

构造函数调用 ：指向 实例对象

事件绑定的方法：指向 事件的对象

箭头函数 ：箭头函数中没有 this，this指向就是定义时所在的作用域中的 this 的值

apply，call，bind

apply，call，bind 改变函数运行时的指向，当第一个参数为null或undefind时，指向 window

apply，call 临时改变thi指向一次

apply ： 可以传入数组，第一个参数：要绑定给this的值 第二个参数：参数列表（可以是数组），使用apply方法改变 this 指向后原函数会立即执行，且此方法只是临时改变thi指向一次。

call  ： 传入参数列表，改变函数指向并立即调用，第一个参数要：绑定给this的值，第二个参数必须是单个参数列表，以逗号分隔的方式,不能是数组

bind  ：不会调用函数，可以改变函数内部指向，返回绑定this之后的函数

    bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入，call则必须一次性传入所有参数)，但是它改变this指向后不会立即执行，而是返回一个永久改变this指向的函数。

  这三个方法的主要区别在于如何传递参数和何时执行函数。apply和call立即执行函数，而bind则返回一个新的函数，可以在之后的任何时间调用。

apply，call，bind 三者的区别

三者都可以改变函数的this对象指向。
三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局window。
三者都可以传参，但是apply是数组，而 call、bind 是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行

图片懒加载原理

在可视区域之外的图片默认不加载，随着页面的滚动，图片进入了可视区域的范围，则触发图片的加载显示

在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

img 的 src 属性 ，初始化img 的时候，src不能是真实的图片地址，把真实地址存放在一个自定义属性中，例如 data-src 来存放

null 和 undefind 的区别

undefined
    1、声明一个变量，但是没有赋值
    2、访问对象上不存在的属性或者未定义的变量
    3、函数定义了形参，但没有传递实参
    4、使用 void 对表达式求值

null
    1.如果定义的变量在将来用于保存对象，那么最好将该变量初始化为null，而不是其他值
    2.当一个数据不再需要使用时，我们最好通过将其值设置为null来释放其引用，这个做法叫做解除引用

可以把 undefined 看作是空的变量，而 null 看作是空的对象

== 和 === 的区别

==  只比较它们的值是否相等（会进行隐式转换）

=== 会比较它们的值和数据类型是否相等

|| 和 ?? 的区别

||：适用于任何假值的情况，包括 null, undefined, false, 0, NaN, 空字符串 ''

??：仅适用于 null 和 undefined 的情况。

冒泡排序

相邻的数据进行两两比较，小数放在前面，大数放在后面，这样一趟下来，最小的数就被排在了第一位，第二趟也是如此，如此类推，直到所有的数据排序完成

ES6 新特性

1.let、const
2.结构赋值
3.扩展运算符
4.箭头函数
5.Promise
6.Set ：不会出现重复的值
7.Map ：键值对形式
8.async await
9.class类
10.ES6模块化
11.装饰器

1.let、const 和 var 的区别 ：
    var 声明的变量，没有“块级作用域”的限制；
    let / const 声明的变量，具有“块级作用域”。

    var 声明的变量存在“变量提升”，let / const没有。
    let / const 有暂时性死区 ，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是 在声明之前就使用这些变量，就会报错

    let / const 不允许重复声明

    let 和 const 的区别 ：const 声明的是常量，不能被修改。

2.解构赋值

    如果解构不成功，变量的值就等于 undefined
    解构赋初始值时，如果解构成功，则默认值失效，赋初始值时，严格等于 undefined ，才能赋初始值


    1.数组解构赋值
    let [a, b, c, d, e, f] = arr

    2.对象解构赋值
    对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
    let obj = {
        a: 1,
        b: [1,2,3],
        c: false,
        d: {name: 'geekxia', age: 10 }
    }
    let { a, b, c, d, e } = obj

    3.字符串的解构赋值

    4.数值和布尔值的解构赋值

        解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。


    使用场景：

    1.交换变量的值

        let a = "hello";
        let b = "world";
        [a, b] = [b, a];

    2.从函数返回多个值
        函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便
    3.函数参数的定义
        解构赋值可以方便地将一组参数与变量名对应起来
    4.提取JSON数据数据
        解构赋值对提取JSON对象中的数据，尤其有用
    5.函数参数的默认值
    6.遍历Map结构
        var map = new Map();
        map.set('first', 'hello');
        map.set('second', 'world');
        for (let [key, value] of map) { console.log(key + " is " + value); }
    7.输入模块的指定方法
        加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰
    const { SourceMapConsumer, SourceNode } = require("source-map")

3.Promise

    Promise 是异步编程的一种解决方案，是一个对象

    Promise 有三种状态：pending (进行中) 、fulfilled （成功）、reject（失败）

    状态改变只有两种可能：pending（进行中） => fulfilled （成功） /   pending（进行中） => reject（失败）

    基本语法：

        Promise对象是一个构造函数，用来生成 Promise 实例，接收一个函数作为参数，函数中有两个参数（resole，reject），resole表示成功的回调，reject表示失败的回调，可以在回调后面调用 then（）、cath（）、finally( )
        then（）方法表示成功时的回调
        cath（）方法表示失败时的回调
        finally（）方法表示成功或失败都会执行的回调

4.字符串扩展
    1.repeat() repeat 方法返回一个新字符串，表示将原字符串重复 n 次
    参数如果是小数，会被取整
    如果 repeat 的参数是负数或者 Infinity ，会报错
    如果参数是0到-1之间的小数，则等同于0
    参数 NaN 等同于0
    如果 repeat 的参数是字符串，则会先转换成数字

5.async await
    async 用来修饰函数，将函数的返回值封装成 Promise 对象
    await 后面跟一个 Promise 对象（如果不是会转换成 Promise 对象），表达式返回 Promise 结果

GET 和 POST 请求的区别

1.浏览器回退的时候，GET请求不会重新请求，而 POST 请求会重新请求
2.GET请求会缓存，而 POST 不会
3.GET参数会暴露在地址栏上，相对不安全，而 POST 不会，相对安全

cookie 和 localstore 和 sessionstore 区别

1.存储大小的区别

    cookie数据大小不能大于4K

    localStorage 和 sessionStorage则可以达到5M

2.时效性

    cookie在设置的有效期内一直有效

    localStorage存储持久数据，只要不手动清除则一直存在

    sessionStorage数据在当前浏览器关闭后就会被自动清除

3.数据与服务器间的交互方式

    cookie的数据会自动传递到服务器端，服务器端也可以写cookie到客户端

    localStorage和sessionStorage不会把数据自动传到服务器端，仅在本地存储

http 响应状态码

200 成功

300 重定向
    301 永久重定向（请求资源的URL被永久的改变，新的URL会在响应的Location中给出）
    302 临时重定向
    304 未修改（协商缓存生效）。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
    307 临时重定向。与302类似。使用GET请求重定向

400 客户端请求有语法错误，不能被服务器所理解
    401 请求未经授权
    403 服务器收到请求，但是拒绝提供服务
    404 请求资源不存在，举个例子：输入了错误的URL。
    405 方法不被允许

500 服务器发生不可预期的错误
    503 服务器当前不能处理客户端的请求，一段时间后可能恢复正常

js 事件循环机制 （Event Loop）

事件循环是 js实现异步的一种方法，也是 js的执行机制，由调用栈、任务队列（宏任务和微任务）以及渲染步骤组成

JS是单线程的，浏览器在执行JS代码时先执行同步任务，再执行异步任务

 **主线程任务——>微任务(promise)——>宏任务(setTimeout)——>宏任务里的微任务——>宏任务里的微任务中的宏任务——>直到任务全部完成**


调用栈（Call Stack）

    用于存储同步任务的执行上下文（函数调用栈）

    LIFO（后进先出）结构，代码按顺序执行

任务队列（Task Queue）

    宏任务队列（Macrotask Queue）：setTimeout、setInterval、DOM 事件回调、I/O 操作等

    微任务队列（Microtask Queue）：Promise.then、MutationObserver、queueMicrotask

渲染引擎（Render Pipeline）

    负责页面渲染（样式计算、布局、绘制）

    与事件循环协作，在适当时机更新界面


异步任务包括 宏任务 、 微任务

**宏任务**：

    setTimeout

    setInterval

    主线程任务完成、所有微任务也完成的情况下就会立即执行

**微任务:**

    promise

    process.nextTick(node 独有)

HTTP 协议 、3 次握手，四次挥手

HTTP超文本传输协议，主要作用就是规定浏览器与服务器之间如何通信以及请求响应数据包的格式

三次握手（建立连接的一个过程）
1. 第一次：浏览器首先发送SYN码给服务器，请求和服务器建立连接。
2. 第二次：服务器接收到SYN码后，发送SYN+ACK码给浏览器，告诉浏览器已建立连接。
3. 第三次：浏览器接收ACK码，验证是否正确，若正确就建立数据连接，可以进行数据传输。

需要三次握手才能确认双方的接收与发送能力是否正常。

四次挥手（断开连接的过程）
1. 第一次：浏览器发送FIN码给服务器，告诉服务器，数据传输完成
2. 第二次：服务器接收到FIN码，然后发送ACK码给浏览器，告诉浏览器，你可以断开连接
3. 第三次：服务器，继续发送FIN + ACK码，告诉浏览器我的数据发送完毕
4. 第四次：浏览器接收到FIN码 + ACK码后，同样会发送ACK码给服务器，告诉服务器，我已接收到，你可以断开连接

http 和 https 的区别

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的 ssl 加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

防抖（debounce）

就是在触发事件后，在 n 秒内，函数只执行一次，如果在 n 秒内，又触发了事件，则会重新计算函数执行的时间

防抖函数分为非立即执行版和立即执行版。

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

- search远程搜索框：防止用户不断输入过程中，不断请求资源，n秒内只发送1次，用防抖来节约资源
- 按钮提交场景，比如点赞，表单提交等，防止多次提交
- 监听 resize 触发时，调整浏览器窗口大小会不断触发 resize ，使用防抖可以让其只执行一次

节流

节流，就是指连续触发事件，但是在 n 秒 内只执行一次函数

- 拖拽场景：固定时间内只执行一次， 防止高频率的的触发位置变动
- 监听滚动事件：实现触底加载更多功能
- 屏幕尺寸变化时， 页面内容随之变动，执行相应的逻辑

new 操作符

- 创建一个全新的对象
- 这个对象的 __proto__ 属性 要指向 构造函数 的 原型 prototype
- 执行构造函数，使用 call/apply 改变 this 的指向
- 返回值为object类型则作为new方法的返回值返回，否则返回上述全新对象。


（1）创建一个新对象
（2）将对象的__proto__属性指向构造函数的 prototype 属性
（3）将构造函数的作用域赋给新对象（因此this就指向了这个对象）
（4）返回新对象

描述浏览器输入 URL 到页面渲染的整个过程

浏览器的地址栏输入URL并按下回车；
    DNS 解析：将域名解析成 IP 地址
    生成 HTTP 请求报文
    TCP 连接：TCP 三次握手；（三次握手的目的：为了防止已经失效的连接请求报文段突然又传送到了服务器端，从而产生错误）
    发送 HTTP 请求；
    服务器处理请求并返回 HTTP 报文；
    浏览器解析渲染页面；
    断开连接：TCP 四次挥手。

白屏

js 执行过程中的错误
资源错误
网络延迟，JS加载延迟 ,会阻塞页面

预防 ：
    1.骨架屏
    2.loading
    3.路由懒加载
    4.SSR 服务端渲染

csrf

跨站点请求伪造 ，攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求

预防：

    1、token验证

        由于恶意用户无法窃取cookie，只能利用用户cookie模拟未携带token的http请求，那只要在服务器端进行token验证就可以防御xsrf的攻击。比如我们可以将token存储在localStorage中。

    2、验证码

        需要用户自己来填写验证码从而识别是否是用户主动发起的该请求。
        其优点：简单粗暴、低成本
        缺点：用户体验不好，需要多次验证。

    3、Referer 字段

        利用 HTTP 头中的 Referer 判断请求来源是否合法，Referer记录了该 HTTP 请求的来源地址。

xss

跨站脚本攻击,代码注入攻击，注入恶意脚本，利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全

预防：
    1、输入过滤
        对用户的输入进行过滤，包括text、post等等所有输入进行可靠性检测。
        也可以制作一个白名单，一但输入中的字符不在白名单内，自动过滤掉。
    2、转义
        与正则的思想类似，对比如<、>等等特殊字符进行转义处理。

    1.验证码
    2.服务端渲染开启模板引擎自带的 HTML 转义功能
    3.主动检测和发现，可使用 XSS 攻击字符串和自动扫描工具寻找潜在的 XSS 漏洞

数组去重

扩展运算符结合set集合  [...new Set(xxx)]

利用 双重for循环 ,结合 splice 方法

利用 filter() 去重

利用 for 循环 搭配 indexOf 去重

利用 for 循环结合 includes 实现数组去重

对象去除不必要字段

1.使用 lodash 库的 omit 方法：

    安装 lodash 库并使用 omit 方法来去除不需要的字段。
    这种方法简洁且易于维护，适用于需要处理多个字段的情况。

    const userData = omit(userInfo, ['confirmPassword', 'captcha']);

2.使用 Object.keys 和 reduce：

    通过 Object.keys 获取对象的所有键，然后使用 reduce 方法构建一个新的对象，排除不需要的字段。
    这种方法灵活且可控，适用于复杂的字段管理。

    const userData = Object.keys(userInfo).reduce((acc, key) => {
        if (key !== 'confirmPassword' && key !== 'captcha') {
            acc[key] = userInfo[key];
        }
        return acc;
    }, {} as Partial<UserDto>);

3.使用 for...in 循环：

    通过 for...in 循环遍历对象的所有属性，并构建一个新的对象，排除不需要的字段。
    这种方法直观且易于理解，适用于简单的字段管理。

    const userData: Partial<UserDto> = {};
    for (const key in userInfo) {
        if (key !== 'confirmPassword' && key !== 'captcha') {
            userData[key] = userInfo[key];
        }
    }

4.使用 Object.assign 和 delete：

    通过 Object.assign 创建一个新的对象，然后使用 delete 删除不需要的字段。
    这种方法简单直接，适用于需要删除

    const userData = Object.assign({}, userInfo);
    delete userData.confirmPassword;
    delete userData.captcha;

for 循环 和 forEach 循环的区别

forEach循环过程中不可以中断，for循环可以使用 关键字 break、return、continue 进行中断

return、break、continue 的区别

1、return 关键字并不是专门用于跳出循环的，return 的功能是结束一个方法。

2、continue 只是中止当前循环，接着开始下一次循环。

3、break 立即终止当前所在的循环或 switch 语句，并跳出循环体，会继续执行该循环之后的代码（如果有的话）

for in 和 for of 的区别

for in 适合遍历对象的属性，for of适合遍历数组
for in 循环出的是 key 值，for of循环出的是 value
for in 可以遍历可枚举属性，for of 遍历的是可迭代的
for of 不能直接遍历对象，需要配合 Object.keys() 搭配使用

什么是 SEO？你有哪些策略实现 SEO

SEO：搜索引擎优化，让用户更多地找到你
SEO优化的原则：尽量减少js、css功能，尽可能多地使用静态html
SEO策略：官网、移动官网
  数据能用静态渲染，尽量使用渲染
  h1-h6
  尽量不要都使用div
  html5语义化标签 header footer article nav aside
  meta 元数据、关键词
  title 标签
  加上title属性
  加上图片alt属性
  服务端渲染

如何给 SPA(单页面应用程序)做 SEO

1.SSR服务端渲染

    将组件或页面通过服务器生成 html，再返回给浏览器，如 nuxt.js

2.静态化

    目前主流的静态化主要有两种：（1）一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中（2）另外一种是通过WEB服务器的 URL Rewrite的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果

3.使用 Phantomjs 针对爬虫处理

    原理是通过Nginx配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个node server，再通过PhantomJS来解析完整的HTML

浏览器缓存两大策略

1. 强制缓存：不会向服务器发送请求，直接命中内存中的缓存资源，从chrome Network中可以看到资源200且from disk cache或from memory cache。

   强制缓存 就是不会向服务器发送请求,而是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程


2. 协商缓存：向服务器发送请求，服务器根据request header内的参数来判断是否需要更新此资源，如果不需要更新，服务器返回304的状态码，然后通知浏览器读取本地缓存。

    协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

总结：强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用强缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，使用则返回304，继续使用协商缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；

函数式编程

React16.8 和 Vue3.0

函数式编程使得代码单元相比面向对象来说更加独立，在tree shaking（移除 JavaScript 上下文中的未引用代码(dead-code)）过程中更便于打包工具对未使用的代码进行过滤，对项目体积有一定的优化

函数式编程以函数为代码单元，相比于面向对象的方式减少了对this的控制，对于js这种this指向可能会发生改变的语言，一定程度上减轻了开发人员对于this指向问题的困扰

函数式有利于单元测试

数据结构

集合结构：该结构的数据元素间的关系是“属于同一个集合”
线性结构：该结构的数据元素之间存在着一对一的关系
树型结构：该结构的数据元素之间存在着一对多的关系
图形结构：该结构的数据元素之间存在着多对多的关系，也称网状结构

Vue

Vue 基本指令

v-if , 当它们的值是 false 时，元素被移除掉
v-show，当它的值是 false 时，元素只是通过 display:none 来隐藏元素

v-if 本质就是 创建和销毁元素
v-show 是通过 display:none css样式的方式来隐藏元素

v-for 和 v-if 的优先级：
    v-for 的优先级更高，如果同时出现在同级每次渲染都会先执行循环再判断条件，由此可见对性能损耗比较大，可使用计算属性先筛选需要的数据

v-model 原理

v-bind：value

v-on：事件（input）  手动取值（e.target.value），并赋值

存在问题：v-model 和 value 有一个强绑定关系，如果子组件中有一个 input 原生标签，此时就会影响原生标签的 value 和 input 事件,想要支持多属性的话，需要使用.sync

vue3 统一 使用 v-model 进行多个数据双向绑定，废除了 model 组件选项。

计算属性、监听器及其二者区别

 计算属性 computed

    作用：对多个声明式变量进行复杂运算，以减少在指令使用复杂的表达式
    特点：依赖于Vue的响应式系统，自己关联的声明式变量只要不发生变化，不会重新计算，具有缓存作用
    原理：getter、setter 钩子函数

 侦听器 watch

    作用：用于监听一个变量的变化，可以监听哪些变量呢？

      声明式变量
      计算属性
      路由$route

  区别：
        watch 可以进行异步操作，computed 不行
        computed 依赖于Vue的响应式系统，具有缓存作用，watch没有

  计算属性默认只有 getter属性，如果需要 setter 属性，改成对象的写法

    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }

  watch 如果需要配置其他属性（深度监听），需要改成 对象的形式

    watch: {
        myName(newValue,oldValue){
            // do someing
        },
        myNumber: {
            handler(newVal, oldVal) {
                console.log('newVal', newVal);
                console.log('oldVal', oldVal);
            },
            //immediate为true时则立即触发回调函数；如果为false，则和上面的例子一样，不会立即执行回调。
            immediate: true，
            deep：true
          }
      }

methods 与 computed 区别

1、调用方式不同。computed直接以对象属性方式调用，不需要加括号，而 methods 必须要函数执行才可以得到结果。

2、绑定方式不同。methods与compute纯get方式都是单向绑定，不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。

3、是否存在缓存。methods没有缓存，调用相同的值计算还是会重新计算。competed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。

$nextTick

在下次 DOM 更新循环结束之后,执行延迟回调，获取更新后的 DOM

视图还没更新完，获取不到 dom 节点的信息

原理：Vue的异步更新策略，就是如果数据发生变化，Vue不会立刻更新 DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更会异步的批量更新

使用场景：1.created中获取DOM时
        2.响应式数据变化后获取DOM更新的状态，比如 列表更新后的高度

    nextTick 有一个参数 ，是回调函数，作用是，等待 视图更新后，再执行 回调函数中的代码

Vue 组件传参

父子组件通信：
    父传子通过props
    子传父通过自定义事件
兄弟组件通信：
    事件总线 eventbus 是基于一个消息中心，订阅和发布信息的模式 $on  $emit
vuex
跨组件通信：
    provide  / inject
可以通过 $parent 直接获取到父组件的实例，可以通过 $children 直接获取到子组件的实例
ref

vue 的 router 和 route 区别是什么

router
    是 VueRouter 的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

$router.push
$router.replace

route
    是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
    $route.path
    $route.params
    $route.name
    $route.query:含路由中查询参数的键值对

Vue 路由守卫

全局守卫(3)：在所有路由导航之前或之后执行

    全局前置守卫 beforeEach((to,from,next)=>{})

    全局解析守卫 beforeResolve ((to,from,next)=>{})

    全局后置钩子 afterEach((to,from)=>{}) 没有 next（）

路由独享守卫（1）: 在进入特定路由之前执行

    beforeEnter：（to,from）=>{}

组件内守卫（3）:在进入或离开特定组件时执行

    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this`
    // 因为当守卫执行时，组件实例还没被创建！
    beforeRouteEnter

    // 可以访问 this
    beforeRouteUpdate

    beforeRouteLeave

为什么 data 属性是一个函数而不是一个对象？

形成一份独立的作用域，不会受到其他实例对象数据的污染，避免变量全局污染

Vue 的响应式原理（双向绑定原理）

响应式发生在创建阶段，Data中的变量默认是不具备响应式原理的，Vue中 把 data 中的选项进行遍历，使用 Object.defineProperty 进行响应式数据劫持，并把这些转化为 getter/setter  ，将劫持到的数据赋值给当前实例化对象上面，当data中的数据发生变化时触发 getter/ setter（钩子函数），然后通知 watcher，通过 watcher 进行视图更新，视图发生更新进而生成新的虚拟DOM

Vue 的生命周期

Vue的生命周期，总共有11种，常用的有8种，分为4个阶段，分别是：创建、挂载、更新、销毁阶段，

    开始先实例化，初始化事件及钩子函数，

    然后进入第一个阶段，创建阶段，beforeCreate   ---->  created ,响应式原理就发生在这个阶段，具体是通过对Data选项进行遍历，使用object.defineProperty进行响应式数据劫持，并把这些 转化为 getter/setter， 把劫持到的数据赋值到当前实例化对象上，当data中的数据发生变化时触发 getter/ setter（钩子函数），然后通知 watcher，通过 watcher 进行视图更新，视图发生更新进而生成新的虚拟DOM，，可以在创建完成时期（created），进行发请求，传数据，调接口，

    创建阶段结束之后，就开始找视图结构，找到视图结构之后，

    就进入了第二个阶段（ beforeMount  ----->   mounted）挂载阶段,在这个阶段，创建虚拟DOM对象，然后把虚拟DOM对象替换成真实的数据，完成视图的渲染，挂载完成之后，可以进行调接口，开启定时器，长连接，DOM操作等。

    当声明式变量发生变化时，就进入第三阶段（ beforeUpdate  ---->  updated ）更新阶段，再创建一个新的虚拟DOM，然后运用 diff算法，把新的和旧的虚拟DOM进行比较，找出两者之间变化的最小差异，标记为脏节点，然后 派发（patch） 给 Watcher，通过 Watcher 转化为真实的DOM，完成页面的渲染，只要声明式变量再次发生改变时，就会一直循环。

    最后一个为销毁阶段（beforeDestroy  ---> destroyed），在销毁之前，可以关闭定时器，关闭长连接，清除耗费内存的其他变量，最后销毁

    动态组件 keep-alive

        它是Vue内置组件，在Vue系统中可以直接使用

        作用：被keep-alive所包裹的组件，不会“死”，不会被销毁

        生命周期：被keep-alive包裹的组件，有两个特殊的生命周期

            activated：当组件被激活时触发

            deactivated：当组件被停用时触发

    keep-alive 有三个属性 ：

        include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
        exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
        max - 数字。最多可以缓存多少组件实例。

父子组件生命周期执行顺序

加载渲染过程：
    父 beforeCreate --  父 created -- 父 beforeMount --子 beforeCreate --子 created --子beforeMount -- 子 Mounted --父 Mounted

更新过程：
    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

销毁阶段:
    父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

Vuex 工作流程

    Vuex在工作中，主要用于解决组件之间数据共享的问题，当我们需要定义共享数据的时候，定义在状态管理的State中，页面中如果发生各种交互行为，需要修改state，我们可以通过Actions或者Mutations方法，当我们需要通过后端调接口时，我们就封装actions方法，在页面（组件）的 Mouted 生命周期或者Created 生命周期中，进行派发并触发（Dispatch）一个 action 方法，并把参数传递过去，得到后端异步数据后，我们在状态管理的Actions中commit（提交并触发）Mutations方法，来修改state，在页面中我们使用...mapState来使用数据，每次state更新，页面自动更新，如果页面中没有涉及到页面数据，只是同步数据，我们直接在页面事件处理器中，通过commit（提交并触发）Mutations方法，来修改state，state发生变化，页面自动更新

Vuex 数据持久化原理

vuex只是在内存保存状态，刷新之后就会丢失

1.使用插件（vue-persist、vue-persistedstate） 内部实现就是通过订阅（subscriber） mutation变化做统一处理，通过插件的选项控制哪些需要持久化
2.提交 mutation的时候同时存入 localStorage，store中把值取出来 作为state的初始值即可
subscriber 方法

Vue.use()做了什么工作

Vue.use() 是全局注册一个组件或者插件的方法。每次注册前，都会判断一下这个组件或者插件(plugins)是否注册过，如果注册过，就不会再次注册了。

第一，判断这个插件是否被注册过，如果已经注册了，不允许重复注册。如果插件没有被注册过，那么注册成功之后会给插件添加一个 installed 的属性，其值为true。Vue.use方法内部会检测插件的installed属性，从而避免重复注册插件.


第二，接收的plugin参数的限制是 Object | Function 两种类型之一。

1.如果是对象

    该对象里面要有一个 install 方法

    Vue.use就是调用里面的 install 方法 ，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，用于传入插件的配置

2.如果是一个 function

    Vue.use时 function 会直接执行

作用 ：

    添加全局方法或者属性。如: vue-custom-element

    添加全局资源：指令/过滤器/过渡/组件等。如 vue-touch

    通过全局混入来添加一些组件选项。如 vue-router

    添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现

    一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

Vue 依赖收集

通过 Object.definedproperty,进行响应式数据劫持，来设置观察属性的 setter 和 getter

通过 getter 收集依赖，通过 setter 触发依赖更新

get事件在属性没有变化时触发并且还会触发dep收集依赖

set事件在属性发生变化触发并且触发dep收集依赖再触发Watch执行更新

跨域与浏览器同源策略

什么是跨域？

    "协议：//域名：端口"，有任何一个不同就是跨域

什么是 浏览器同源策略？

    1.浏览器同源策略，是一种安全机制，它的特点是，阻止Ajax进行跨域（非同源）下的数据请求

    2.同源策略只在浏览器中才起作用，在Node服务器上使用ajax工具跨域请求，是没有任何问题

总结：只有在浏览器中，同源策略才起阻止ajax的跨域请求

如何解决跨域请求的问题？（常用有三种）

        1.JSONP  原理：利用 script 的 src属性，浏览器不会阻止， 只能解决GET请求的跨域问题

        2.CORS   在后端添加 headers 以允许被同源访问(后端配置允许跨域的源)

        3.代理    前端代理、后端 Nginx/Apache代理

前端代理解决 "跨域请求" 的机制是怎样的呢？

        1.让前端业务调接口，访问本地服务器（localhost：8080），如此就不跨域

        2.本地服务器做了代理，当收到前端业务请求时，进行代理转发，相当于是node服务向远程服务器发送请求

        3.node服务向远程发送请求时，跨域了，但是node环境中没有CORS同源策略

在本地开发环境下，可以使用前端代理，当上线后可以使用后端代理

Vue 的 diff 算法

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较

比较方式:

diff整体策略为：深度优先，同层比较

比较只会在同层级进行, 不会跨层级比较

比较的过程中，循环从两边向中间收拢

Diff 运算的工作流程：（发生在更新阶段）

1.在挂载阶段，生成一个虚拟DOM,保存在内存中

2.在声明式数据发生变化时（更新阶段），Vue会生成一个新的虚拟DOM

3.使用diff（vm1，vm2），找出两个虚拟DOM之间变化最小差异，将其标记为脏节点

4.接着把脏节点patch到Watcher，使用真实DOM操作api更新视图

如何理解虚拟 Dom

1.虚拟DOM初始生成，发在挂载阶段beforeMoute--->Mouted

2.是一个json对象，是根据真实Dom结构生成的，用于描述真实DOM结构，保存在内存中

虚拟DOM的作用：给DOM更新提供了中间层，避免用户过渡地操作真实DOM，提高web性能

Vue性能高原因：Vue工作每次都会生成一个新的虚拟DOM对象，然后使用diff运算，对比新的和旧的虚拟DOM，找出他们之间的变化的最小差异，再通过真实的DOM操作，把最小差异更新到页面上

BSR 的优势和劣势有哪些？

BSR 客户端渲染(前后端分离)：视图与数据的组装是在客户端完成的

目前主流的 React ，Vue， Angular 等 SPA 页面未经特殊处理均采用客户端渲染。最常见脚手架 create-react-app 生成的项目就是客户端渲染，查看源代码可以发现除了一个 bundle.js 以外看不到其他的内容，浏览器加载 bundle.js 后会"挂载" React 代码到 root 节点上，形成页面的渲染。

前后端分离,代码更容易维护
数据化应用，交互更加丰富
前端工程师讲价值更高
SEO有严重劣势
在ToB产品上应用更广泛

SSR 的优势和劣势有哪些？

前后端不分离,对后端的要求非常高
有利于SEO
对客户端的压力比较小，服务器压力较大
在ToC产品上应用比较广泛

hash 和 history 区别

1.原理不同 ：

    hash：通过监听浏览器的 hashchange（）事件变化，查找对应的路由规则

    history：利用 H5 的 history 中新增的两个API pushState（）和 replaceState（）和 一个 popstate（） 事件 监听URL变化

    history.pushState 浏览器历史纪录添加记录

    history.replaceState修改浏览器历史纪录中当前纪录

    history.popState 当 history 发生变化时触发

2.history 模式需要后端配合将所有访问都指向 index.html，否则用户刷新页面，会导致 404 错误

require 与 import 的区别

1.两者的加载方式不同，require是在运行时加载，而import 是在编译时加载

2.语法规范不同，require是 CommonJS/AMD规范，import是 ESMAScript6+ 规范

项目权限管理

一般分为 页面权限和按钮权限
方案 ：前端方案、后端方案

Vue3.0 新特性

1. 响应式原理

   Vue2.0 响应式 使用 object.defindPrototy，对data上的数据进行遍历，进行响应式数据劫持，然后把劫持到的数据赋值给当前组件实例化对象上面
   
       存在的问题：
   
           1.对象动态新增属性、删除属性，界面不会自动更新（需要使用$set、$delete）
   
           2.数组直接通过下标修改数值，界面不会自动更新（需要使用$set，或者splice方法）
   
           3.必须要遍历所有的数据,还需要重写数组的方法,性能消耗也比较大
   
       如何监听数组的变化：
   
           原理就是重写数组的七个原始方法,当使用者执行这些方法时,我们就可以监听到数据的变化,然后做些更新操作,
   
   

   Vue3.0 的 响应式（Proxy）
   
       直接对整个对象进行响应式数据劫持，并返回一个新的对象，就可以直接操作新的对象
   
       可以直接监听数组的变化（`push`、`shift`、`splice`）
   
       实现原理:
   
           通过 Proxy（代理）：拦截对象中的任意属性的变化，包括属性的读写、添加、删除等
   
           通过 Reflect（反射）：对被代理对象的属性进行操作
   
   
   响应式数据丢失问题：
   
       使用 reactive 定义的数据重新赋值
   
       响应式数据被解构赋值（大多是 props 中的数据被解构赋值）
   
       使用vuex的数据进行赋值
   
   
   可以使用 toRefs() 和 toRef() 这两个工具函数
   
   import { toRefs, toRef } from 'vue'
   
   // 将 `props` 转为一个其中全是 ref 的对象，然后解构
   const { title } = toRefs(props)
   
   const title = toRef(props, 'title')
   

2. 性能优化

   diff算法优化：
   
       Vue 2.0 是全量比较
   
       Vue 3.0 新增静态标记，每次创建虚拟 DOM 的时候，会根据DOM中的内容，是否会发生变化，添加静态标记，只比较有静态标记的
   

   静态提升：
   
       Vue2.0中，无论元素是否发生变化，每次都会重新创建，然后渲染
   
       Vue3.0中，对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可
   

   事件侦听器缓存、复用
   

   SSR(服务端渲染优化） ：
       当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染
   

3. 按需编译、体积更小

   vite 实现原理：利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一下预编译，省去webpack冗长的打包时间
   
   

4. Composition API

   setup（）函数为 Composition API 的入口，在 beforeCreated 之前执行 ，对象中的属性、方法需要 return 出去 setup（）函数中也可以使用生命周期，setup（）相当于
   
   常用的组合式 Api:

   setup、ref、reactive、计算属性、侦听器、生命周期、响应式原理、自定义Hooks、toRef、toRefs
   

   
   其他组合式 Api:

   shallowRef、shallowReactive、readonly、shallowReadonly、toRaw、markRaw
   

   
   setup 函数：
   
   ```js
   setup 函数有两个参数：props 和 context
   
   setup 函数中如果直接解构 props ，会出现丢失响应性，需要解构 `props` 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs()和 toRef()
   
   context(上下文对象)是非响应式的，可以安全地解构
   

   toRefs: 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
   
   toRef:将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
   

   如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象
   若要避免这种深层次的转换，请使用 shallowRef() 来替代
   
   若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用 shallowReactive() 作替代
   

5. 更好兼容 TS

6. 更先进的组件

- Fragment
- Teleport
- Suspense

DOM 更新时机

当你修改了响应式状态时，DOM 会被自动更新。

更新不是同步的。Vue 会在“nextTick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick()

import { nextTick } from 'vue'

async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}

- 一、变化了哪些细节

1、ref操作的变化。v2中使用ref属性访问DOM或组件实例，在this.$refs上访问它们；在v3中，使用ref这个组合API，配合ref属性来访问DOM或组件实例；当ref和v-for同时使用时，不再自动收集ref实例了，需要封装自定义收集方法。

2、异步组件的变化：v2中使用Promise模拟异步组件；在v3中，使用defineAsyncComponent定义异步组件。

3、$attrs的变化：v2中用于接收自定义属性们（但不包括class和style）；v3中除了自定义属性，可以接收class和style了。使用 $attrs / setupCtx.attrs / useAttrs() 接收。

4、自定义指令的变化：v2中使用Vue.directive()定义全局指令；v3中使用app.directive()定义全局指令。v3中自定义指令的钩子们发生系列变化。局部指令仍然使用directives选项。

5、创建根实例的系列变化：v3中使用 createApp()创建根实例；创建根实例时如果用到data选项，data只能写成工厂函数；挂载根实例节点时只能使用$mount()，el选项没有了。

6、函数式组件的变化：v2中是支持函数式组件的，v3中对函数式组件的支持更加强大。

7、Vue构造器函数的变化：v2中可以使用Vue这个构造函数，所有全局API都放在Vue上。v3中，不能使用Vue构造函数了，只能使用createApp()来创建根实例。为什么在v3中要隐藏Vue这个构造函数呢？第一个原因，为了避免开发者操作原型链，这会影响Vue应用的性能；第二原因，是为了配合Webpack实现Vue层面上的"Tree-Shaking"功能。虽然在v3中我们不能在原型链上添加API了，在v3中推荐app.config.globalProperties来添加全局数据。

8、过滤动画的变化：v3中，编写自定义动画名时，使用.qf-enter-from表示进入动画的开始时刻，使用.qf-leave-from表示离开动画的开始时刻。当<transition>对多个元素执行动画时，无须再加key。

9、条件渲染的变化：v3中，v-if/v-else-if/v-else在任何地方使用时，都无须手动添加唯一的key值，v3中会自动为节点们加key。

10、render选项的变化：v2中，render: (h)=>h(App)，也就是h函数在render函数的形参中。v3中，render函数没有h这个形参了，把h函数单独变成一个API。

11、v-if和v-for同时使用的变化：v2中不推荐它两一起用，如果一起用，v-for优化级更高。v3中，这两指令可以一起用，但v-if优先级总是更高。

12、watch监听器的变化：v3中，watch可以同时监听多个声明式变量的变化，调用watch()返回stop()方法（用于停止监听）。

13、接收props的变化：v2中接收props时，如果引用数据类型，default写成工厂函数，在这个工厂函数中可以访问this。在v3中，default工厂函数中没有this，但可以使用inject()。

14、v-model的变化：v3中，在HTML表单上，v-model用法没有变化，包括语法糖写法和v2是一样的。v3中，在自定义组件上，v-model等于:modelValue+@update:modelValue。在自定义组件上，可以同时使用多个v-model，像这样 <Form v-model:x='' v-model:y=''>。v3中，使用v-model时，可以支持自定义修饰符，在子组件中使用 xModifiers: { default: ()=>({})} 接收自定义修饰符。model选项被淘汰了。

15、在使用插槽时，即使是默认插槽，在使用时也要这样 <template #default>。


- 二、移除了哪些细节

1、移除了$listeners

2、移除了$children

3、移除了$on/$off/$once事件API，也就是说“事件总线”被移除了。

4、移除了过滤器，没有这个 app.filter()，也没有了filters选项。

5、移除了 Vue.config.keyCodes 自定义键盘码的功能。

6、移除了 el选项。

7、移除了 propsData选项（从new Vue()向App根组件传递初始化数据），在v3中的替代方案是createApp(App, {数据})的第二个参数。

8、移除了 v-on的.native 修饰符。在v2中，这个修饰符是用于解决移动端事件绑定的性能优化。

9、移除了 model选项。（在v2中，model选项用于自定义 v-model语法糖。）



- 三、新增了哪些细节

1、新增了emits选项、新增了defineEmits()，用于在子组件中接收自定义事件。

2、视图模板支持多节点了，类似React的Fragment功能。需要注意的是，因为组件支持多节点了，对$attrs/<transition>等功能有些影响。

3、新增了 getCurrentInstance() ，在组件中访问app根实例以及其全局数据。需要注意的是，这个API所获取到的app实例，和main.js中的那个app不是完全相同的。

4、新增了 app.provide() 这个全局API，向整个组件树中注入全局数据。在某种程度上讲，这种玩法可以替代app.config.globalProperties这种玩法。

5、新增了 nextTick() 这个API。在v3中，nextTick()也支持"Tree-Shaking"了。

6、新增了 <teleport to='HTML标签/id选择器'>，用于把嵌套的HTML渲染到to属性对应的DOM中去。<teleport>不支持对js的穿梭。

7、新增了 <suspense> 内置组件。用于给异步Vue组件添加交互提示。常常配合<transition> <keep-alive> <router-view> 一起用，给整个系统添加统一的交互（Loading...过渡动画、组件缓存等）。

8、新增了 v-memo 指令。用于性能优化。<div v-memo='[依赖列表]'></div>  有且仅有当依赖列表中的变量发变化时，其内部的视图结构才会更新。forceUpdate()可以做到强制v-memo更新。

9、在<style>中可以使用 v-bind了，v3给了我们第三种实现动态样式的玩法。<style module=''>可以实现样式模块化，给<style>添加命名空间。在视图模板中，使用"$style/样式模块名称"访问样式模块中的样式，在setup使用 useCssModule()可以访问样式模块中的新式。

10、新增了 expose选项 / defineExpose() ，用于把setup中的指定变量暴露出来，给其它组件进行访问与引用。原因是，在v3中，写setup()和<script setup>中的变量默认是隐藏的，无法被其它组件访问。所以，这两个新增的api就是解决这个问题的。

11、新增了 useSlots()，用于在子组件访问插槽作用域。和$slots作用一致。

Vue 3 中的插槽与 Vue 2 的区别

Vue 3 在插槽（slots）方面进行了多项改进，使其更加灵活和高效。以下是 Vue 3 中插槽的主要变化和新特性：

1. 编译优化
静态插槽提升：
Vue 3 会对静态插槽进行编译优化，减少运行时的开销。静态插槽的内容在编译时会被提取出来，避免每次渲染时重新创建。

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件 -->
<my-component>
  <template #header>
    <h1>Header</h1>
  </template>
  <p>Default content</p>
  <template #footer>
    <p>Footer</p>
  </template>
</my-component>

2. 动态插槽名称

动态插槽名称：
Vue 3 支持使用动态插槽名称，这在 Vue 2 中是不支持的。

<my-component>
  <template #[dynamicSlotName]>
    <p>Dynamic Slot Content</p>
  </template>
</my-component>

3. 作用域插槽的简化

简化的作用域插槽：
Vue 3 简化了作用域插槽的语法，使其更加直观和易用。

<!-- 子组件 -->
<template>
  <div>
    <slot :item="item"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: { name: 'Example' }
    };
  }
};
</script>

<!-- 父组件 -->
<my-component v-slot="{ item }">
  <p>{{ item.name }}</p>
</my-component>

4. 默认插槽的简化

默认插槽的简化：
Vue 3 中，默认插槽的语法更加简洁，可以直接使用 v-slot 或简写 #。

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<my-component>
  <template v-slot:default>
    <p>Default content</p>
  </template>
</my-component>

或者简写为：

<my-component v-slot>
  <p>Default content</p>
</my-component>

或者更简洁的简写：

<my-component #>
  <p>Default content</p>
</my-component>

5. 性能优化

性能优化：
Vue 3 在插槽的渲染和更新方面进行了优化，减少了不必要的 DOM 操作，提高了性能。
例如，Vue 3 会更智能地处理插槽内容的变化，只更新必要的部分。

6. 组合式 API 支持

组合式 API 支持：
Vue 3 引入了组合式 API，可以在 setup 函数中更灵活地使用插槽。

<template>
  <div>
    <slot :item="item"></slot>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const item = ref({ name: 'Example' });
    return { item };
  }
};
</script>

<!-- 父组件 -->
<my-component v-slot="{ item }">
  <p>{{ item.name }}</p>
</my-component>

总结
Vue 3 在插槽方面进行了多项改进，包括编译优化、动态插槽名称、简化的作用域插槽和默认插槽语法、性能优化以及组合式 API 支持。这些改进使得 Vue 3 的插槽更加灵活、高效和易用。希望这些信息对你有帮助！如果有更多问题，请随时提问。

vue3.0 新特性

零.Vue3 项目创建

创建 Vue3 的三种方式

• Vue-Cli
• Webpack
• Vite

我用 Vite （尤自创的方案），另外两种方法请自己搜索。

• Vite 的实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间。

1. 安装 Vite

   npm install -g create-vite-app
   

   
   1
2. 利用 Vite 创建 Vue3 项目

   create-vite-app projectName
   

   
   1

3. cd projectName
   npm install
   npm run dev
   

一.vue 从 2.0 到 3.0 都改变了什么

Vue3.0 在去年 9 月正式发布。

为什么要升级 Vue3 使用 Vue2.x 的童鞋都熟悉，Vue2.x 中所有数据都是定义在 data 中，方法定义在 methods 中的，并且使用 this 来调用对应的数据和方法。那 Vue3.x 中就可以不这么玩了， 具体怎么玩我们后续再说， 先说一下 Vue2.x 版本这么写有什么缺陷，所以才会进行升级变更的。

回顾 Vue2.x 实现加减

<template>
  <div class="homePage">
    <p>count: {{ count }}</p>
    <p>倍数： {{ multiple }}</p>
    <div>
        <button style="margin-right:10px" @click="increase">加1</button>
        <button @click="decrease">减一</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
 2
  methods: {
    increase() {
      this.count++;
    },
    decrease() {
      this.count++;
    },
  },
};
</script>

上面代码只是实现了对 count 的加减以及显示倍数， 就需要分别在 data、methods、computed 中进行操作，当我们增加一个需求，就会出现下图的情况：

当我们业务复杂了就会大量出现上面的情况， 随着复杂度上升，就会出现这样一张图， 每个颜色的方块表示一个功能：

甚至一个功能还有会依赖其他功能，全搅合在一起。

当这个组件的代码超过几百行时，这时增加或者修改某个需求， 就要在 data、methods、computed 以及 mounted 中反复的跳转，这其中的的痛苦写过的都知道。

那我们就想啊， 如果可以按照逻辑进行分割，将上面这张图变成下边这张图，是不是就清晰很多了呢, 这样的代码可读性和可维护性都更高：

那么 vue2.x 版本给出的解决方案就是 Mixin, 但是使用 Mixin 也会遇到让人苦恼的问题：

• 命名冲突问题
• 不清楚暴露出来的变量的作用
• 逻辑重用到其他 component 经常遇到问题

所以，我们 Vue3.x 就推出了 Composition API 主要就是为了解决上面的问题，将零散分布的逻辑组合在一起来维护，并且还可以将单独的功能逻辑拆分成单独的文件。接下来我们就重点认识 Composition API。

二. Composition API

2.1setup

setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API 的入口。

setup 执行时机：

export default defineComponent({
  beforeCreate() {
    console.log('----beforeCreate----')
  },
  created() {
    console.log('----created----')
  },
  setup() {
    console.log('----setup----')
  },
})

注意:

1、由于在执行 setup 函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

2、由于我们不能在 setup 函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup 函数中的this修改成了 undefined

3、setup 函数只能是同步的不能是异步的

setup 参数

使用 setup 时，它接受两个参数：

1.props: 组件传入的属性

2.context

setup 中接受的 props 是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。

错误代码示例， 这段代码会让 props 不再支持响应式：

// demo.vue
export default defineComponent ({
    setup(props, context) {
        const { name } = props
        console.log(name)
    },
})

那在开发中我们想要使用解构，还能保持 props 的响应式，有没有办法解决呢？大家可以思考一下，在后面 toRefs 学习的地方为大家解答。

接下来我们来说一下 setup 接受的第二个参数 context，我们前面说了 setup 中不能访问 Vue2 中最常用的 this 对象，所以 context 中就提供了 this 中最常用的三个属性：attrs、slot 和 emit，分别对应 Vue2.x 中的 $attr属性、slot插槽 和$emit 发射事件。并且这几个属性都是自动同步最新的值，所以我们每次使用拿到的都是最新值。

2.2 reactive、ref 与 toRefs

在 vue2.x 中， 定义数据都是在 data 中， 但是 Vue3.x 可以使用 reactive 和 ref 来进行数据定义。

一般我们使用 ref 来处理基础 js 的基本数据类型，使用 reactive 来代理一个对象，但 ref 也是可以定义对象的双向绑定：

import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'Home',
  setup: function () {
    console.log('setup run')
    const obj = ref({ count: 1, name: '张三' })
    setTimeout(() => {
      obj.value.count = obj.value.count + 1
      obj.value.name = '李四'
    }, 1000)
    return {
      obj,
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate run ')
  },
  created: function () {
    console.log('created run ')
  },
})

注意：

• defineComponent 可以给组件的 setup 方法准确的参数类型定义.
• defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
• defineComponent 可以正确适配无 props、数组 props 等形式
• 引入 defineComponent() 以正确推断 setup() 组件的参数类型

我们将 obj.count 和 obj.name 绑定到页面上也是可以的；但是 reactive 函数确实可以代理一个对象， 但是不能代理基本类型，例如字符串、数字、boolean 等。

接下来使用代码展示一下 ref、reactive 的使用：

import { defineComponent, ref, reactive } from "vue";
setup: function () {
    console.log("setup run");
    const year = ref(0);
    const user = reactive({ nickname: "lili", age: 20, gender: "男" });
    setInterval(() => {
      year.value++;
      user.age++;
    }, 1000);
    return {
      year,
      user,
    };
  },

上面的代码中，我们绑定到页面是通过 user.name,user.age；这样写感觉很繁琐，我们能不能直接将 user 中的属性解构出来使用呢?答案是不能直接对 user 进行结构， 这样会消除它的响应式， 这里就和上面我们说 props 不能使用 ES6 直接解构就呼应上了。那我们就想使用解构后的数据怎么办，解决办法就是使用 toRefs。

toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象。具体使用方式如下：

import { defineComponent, reactive, ref, toRefs } from 'vue'
export default defineComponent({
  setup() {
    const year = ref(0)
    const user = reactive({ nickname: 'xiaofan', age: 26, gender: '女' })
    setInterval(() => {
      year.value++
      user.age++
    }, 1000)
    return {
      year,
      // 使用reRefs
      ...toRefs(user),
    }
  },
})

<template>
  <div class="homePage">
    <p>第 {{ year }} 年</p>
    <p>姓名： {{ nickname }}</p>
    <p>年龄： {{ age }}</p>
  </div>
</template>

reactive() 的局限性

1.有限的值类型

    只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型

2.不能替换整个对象

    由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失

    let state = reactive({ count: 0 })

    // 上面的 ({ count: 0 }) 引用将不再被追踪
    // (响应性连接已丢失！)
    state = reactive({ count: 1 })

3.对解构操作不友好,丢失响应式，可以使用 toRefs

    当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接
    import { defineComponent, reactive, ref ,toRefs} from "vue";
    export default defineComponent({
      setup() {
        const year = ref(0);
        const user = reactive({ nickname: "xiaofan", age: 26, gender: "女" });
        setInterval(() =>{
            year.value ++
            user.age ++
        }, 1000)
        return {
            year,
            // 使用reRefs
            ...toRefs(user)
        }
      },
    });

2.3 生命周期钩子

我们可以直接看生命周期图来认识都有哪些生命周期钩子(图片是根据官网翻译后绘制的)：

从图中我们可以看到 Vue3.0 新增了 setup，这个在前面我们也详细说了， 然后是将 Vue2.x 中的 beforeDestroy 名称变更成 beforeUnmount; destroyed 表更为 unmounted，作者说这么变更纯粹是为了更加语义化，因为一个组件是一个 mount 和 unmount 的过程。其他 Vue2 中的生命周期仍然保留。

上边生命周期图中并没包含全部的生命周期钩子， 还有其他的几个， 全部生命周期钩子如图所示：

我们可以看到 beforeCreate 和 created 被 setup 替换了（但是 Vue3 中你仍然可以使用， 因为 Vue3 是向下兼容的， 也就是你实际使用的是 vue2 的）。其次，钩子命名都增加了 on; Vue3.x 还新增用于调试的钩子函数 onRenderTriggered 和 onRenderTricked

下面我们简单使用几个钩子， 方便大家学习如何使用，Vue3.x 中的钩子是需要从 vue 中导入的：

import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate,onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered
} from "vue";

export default defineComponent({
  // beforeCreate和created是vue2的
  beforeCreate() {
    console.log("------beforeCreate-----");
  },
  created() {
    console.log("------created-----");
  },
  setup() {
    console.log("------setup-----");

    // vue3.x生命周期写在setup中
    onBeforeMount(() => {
      console.log("------onBeforeMount-----");
    });
    onMounted(() => {
      console.log("------onMounted-----");
    });
    // 调试哪些数据发生了变化
    onRenderTriggered((event) =>{
        console.log("------onRenderTriggered-----",event);
    })
  },
});

2.4 watch 与 watchEffect 的用法

watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。

watch(source, callback, options) 参数说明：

source:可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量

callback: 执行的回调函数

options：支持 deep、immediate 和 flush 选项。

接下来我会分别介绍这个三个参数都是如何使用的， 如果你对 watch 的使用不明白的请往下看：

a. 侦听 reactive 定义的数据

 watch(
      () => user.age,
      (newAge, oldAge) => {
        console.log(oldAge, newAge);
      }
    );

b. 侦听 ref 定义的数据

const year = ref(0)
setTimeout(() =>{
    year.value ++
},1000)
watch(year, (newVal, oldVal) =>{
    console.log("新值:", newVal, "老值:", oldVal);
})

c. 侦听多个数据

上面两个例子中，我们分别使用了两个 watch, 当我们需要侦听多个数据源时， 可以进行合并， 同时侦听多个数据：

watch([() => state.age, year], ([curAge, newYear], [preAge, oldYear]) => {
    console.log("新值:", curAge, "老值:", preAge);
    console.log("新值:", newYear, "老值:", oldYear);
});

侦听复杂的嵌套对象

我们实际开发中，复杂数据随处可见， 比如：

const state = reactive({
    room: {
    id: 100,
    attrs: {
        size: "140平方米",
        type:"三室两厅"
    },
    },
});
watch(() => state.room, (newType, oldType) => {
    console.log("新值:", newType, "老值:", oldType);
}, {deep:true});

如果不使用第三个参数 deep:true， 是无法监听到数据变化的。

前面我们提到，默认情况下，watch 是惰性的, 那什么情况下不是惰性的， 可以立即执行回调函数呢？其实使用也很简单， 给第三个参数中设置 immediate: true 即可。关于 flush 配置，还在学习，后期会补充

stop 停止监听

我们在组件中创建的 watch 监听，会在组件被销毁时自动停止。如果在组件销毁之前我们想要停止掉某个监听， 可以调用 watch()函数的返回值，操作如下：

const stopWatchRoom = watch(() => state.room, (newType, oldType) => {
    console.log("新值:", newType, "老值:", oldType);
}, {deep:true});

setTimeout(()=>{
    // 停止监听
    stopWatchRoom()
}, 3000)

还有一个监听函数 watchEffect,在我看来 watch 已经能满足监听的需求，为什么还要有 watchEffect 呢？虽然我没有 get 到它的必要性，但是还是要介绍一下 watchEffect，首先看看它的使用和 watch 究竟有何不同。

import { defineComponent, ref, reactive, toRefs, watchEffect } from "vue";
export default defineComponent({
  setup() {
    const state = reactive({ nickname: "xiaofan", age: 20 });
    let year = ref(0)

    setInterval(() =>{
        state.age++
        year.value++
    },1000)

    watchEffect(() => {
        console.log(state);
        console.log(year);
      }
    );
    return {
        ...toRefs(state)
    }
  },
});

执行结果首先打印一次 state 和 year 值；然后每隔一秒，打印 state 和 year 值。

从上面的代码可以看出， 并没有像 watch 一样需要先传入依赖，watchEffect 会自动收集依赖, 只要指定一个回调函数。在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。所以总结对比如下：

watchEffect 不需要手动传入依赖

watchEffect 会先执行一次用来自动收集依赖

watchEffect 无法获取到变化前的值， 只能获取变化后的值

其实我们也能进行自定义封装。

2.5 自定义 Hooks ***

Vue2.x 实现加减的例子， 这里可以将其封装成一个 hook, 我们约定这些「自定义 Hook」以 use 作为前缀，和普通的函数加以区分。

useCount.js 实现：

import { ref, computed } from "vue";
export default function useCount(initValue = 1) {
    const count = ref(initValue);
    const increase = (delta) => {
        if (typeof delta !== "undefined") {
            count.value += delta;
        } else {
            count.value += 1;
        }
    };
    const multiple = computed(() => count.value * 2)
    const decrease = (delta) => {
        if (typeof delta !== "undefined") {
            count.value -= delta;
        } else {
            count.value -= 1;
        }
    };
    return {
        count,
        multiple,
        increase,
        decrease,
    };
}

接下来看一下在组件中使用 useCount 这个 hook:

<template>
  <div>
    aaa
    <p>count: {{ count }}</p>
    <p>倍数： {{ multiple }}</p>
    <div>
      <button @click="increase()">加1</button>     
      <button @click="decrease()">减一</button> 
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import useCount from "./useCount";
export default defineComponent({
  name: "About",
  setup() {
    const { count, multiple, increase, decrease } = useCount(10);
    return {
      count,
      multiple,
      increase,
      decrease,
    };
  },
});
</script>

Vue3 的方式可以很明确的看出，将 count 相关的逻辑聚合在一起， 看起来舒服多了， 而且 useCount 还可以扩展更多的功能。

三.简单对比 vue2.x 与 vue3.x 响应式

Vue2.0 响应式原理

响应化过程需要遍历 data，props 等，消耗较大

不支持 Set/Map、class、数组等类型

新加或删除属性无法监听

数组响应化需要额外实现

对应的修改语法有限制

Vue3.0 响应式原理：使用 ES6 的 Proxy 来解决这些问题。

通过 Proxy 代理，来拦截对 data 的一系列的操作。

Object.defineProperty 只能劫持对象的属性， 而 Proxy 是直接代理对象

由于 Object.defineProperty 只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。但是 Proxy 直接代理对象， 不需要遍历操作

Object.defineProperty 对新增属性需要手动进行 Observe

因为 Object.defineProperty 劫持的是对象的属性，所以新增属性时，需要重新遍历对象， 对其新增属性再次使用 Object.defineProperty 进行劫持。也就是 Vue2.x 中给数组和对象新增属性时，需要使用$set 才能保证新增的属性也是响应式的, $set 内部也是通过调用 Object.defineProperty 去处理的。

四.Teleport 传送门

相当于 react 的 Protal

Teleport 是 Vue3.x 新推出的功能， 没听过这个词的小伙伴可能会感到陌生；翻译过来是传送的意思，可能还是觉得不知所以，没事下边我就给大家形象的描述一下。

Teleport 是什么呢？ Teleport 就像是哆啦 A 梦中的「任意门」，任意门的作用就是可以将人瞬间传送到另一个地方。有了这个认识，我们再来看一下为什么需要用到 Teleport 的特性呢，看一个小例子：

在子组件 Header 中使用到 Dialog 组件，我们实际开发中经常会在类似的情形下使用到 Dialog ，此时 Dialog 就被渲染到一层层子组件内部，处理嵌套组件的定位、z-index 和样式都变得困难。

Dialog 从用户感知的层面，应该是一个独立的组件，从 dom 结构应该完全剥离 Vue 顶层组件挂载的 DOM；同时还可以使用到 Vue 组件内的状态（data 或者 props）的值。简单来说就是,即希望继续在组件内部使用 Dialog,又希望渲染的 DOM 结构不嵌套在组件的 DOM 中。

此时就需要 Teleport 上场，我们可以用包裹 Dialog, 此时就建立了一个传送门，可以将 Dialog 渲染的内容传送到任何指定的地方。

接下来就举个小例子，看看 Teleport 的使用方式

Teleport 的使用 我们希望 Dialog 渲染的 dom 和顶层组件是兄弟节点关系, 在 index.html 文件中定义一个供挂载的元素:

<body>
<div id="app"></div>
+ <div id="dialog"></div>
</body>

定义一个 Dialog 组件 Dialog.vue, 留意 to 属性， 与上面的 id 选择器一致：

<template>
    <teleport to="#dialog">
        <div class="dialog">
            <div class="dialog_wrapper">
                <div class="dialog_header" v-if="title">
                    <slot name="header">
                        <span>{{title}}</span>
                    </slot>
                </div>
            </div>
            <div class="dialog_content">
                <slot></slot>
            </div>
            <div class="dialog_footer">
                <slot name="footer"></slot>
            </div>
        </div>
    </teleport>
</template>

最后在一个子组件 Header.vue 中使用 Dialog 组件,这里主要演示 Teleport 的使用，不相关的代码就省略了。header 组件

<div class="header">
    ...
    <navbar />
+    <Dialog v-if="dialogVisible"></Dialog>
</div>
...

五.Suspense react 中的 lazy suspense

Suspense 是 Vue3.x 中新增的特性， 那它有什么用呢？别急，我们通过 Vue2.x 中的一些场景来认识它的作用。

Vue2.x 中应该经常遇到这样的场景：

<template>
<div>
    <div v-if="!loading">
        ...
    </div>
    <div v-if="loading">
        加载中...
    </div>
</div>
</template>

在前后端交互获取数据时， 是一个异步过程，一般我们都会提供一个加载中的动画，当数据返回时配合 v-if 来控制数据显示。

Vue3.x 新出的内置组件 Suspense, 它提供两个 template slot, 刚开始会渲染一个 fallback 状态下的内容， 直到到达某个条件后才会渲染 default 状态的正式内容， 通过使用 Suspense 组件进行展示异步渲染就更加的简单。:::warning 如果使用 Suspense, 要返回一个 promise :::Suspense 组件的使用：

 <Suspense>
        <template #default>
            <async-component></async-component>
        </template>
        <template #fallback>
            <div>
                Loading...
            </div>
        </template>
    </Suspense>

asyncComponent.vue:

<template>
<div>
    <h4>这个是一个异步加载数据</h4>
    <p>用户名：{{user.nickname}}</p>
    <p>年龄：{{user.age}}</p>
</div>
</template>

<script>
import { defineComponent } from "vue"
import axios from "axios"
export default defineComponent({
    setup(){
        const rawData = await axios.get("http://xxx.xinp.cn/user")
        return {
            user: rawData.data
        }
    }
})
</script>

从上面代码来看，Suspense 只是一个带插槽的组件，只是它的插槽指定了 default 和 fallback 两种状态。

六. 片段（Fragment）

在 Vue2.x 中， template 中只允许有一个根节点：

<template>
    <div>
        <span></span>
        <span></span>
    </div>
</template>

但是在 Vue3.x 中，你可以直接写多个根节点， 是不是很爽：

<template>
    <span></span>
    <span></span>
</template>

七.更好的 Tree-Shaking

Vue3.x 在考虑到 tree-shaking 的基础上重构了全局和内部 API, 表现结果就是现在的全局 API 需要通过 ES Module 的引用方式进行具名引用， 比如在 Vue2.x 中，我们要使用 nextTick:

// vue2.x import Vue from "vue"

Vue.nextTick(()=>{ ... }) Vue.nextTick() 是一个从 Vue 对象直接暴露出来的全局 API，其实 $nextTick() 只是 Vue.nextTick() 的一个简易包装，只是为了方便而把后者的回调函数的 this 绑定到了当前的实例。虽然我们借助 webpack 的 tree-shaking,但是不管我们实际上是否使用 Vue.nextTick(),最终都会进入我们的生产代码， 因为 Vue 实例是作为单个对象导出的， 打包器无法坚持出代码总使用了对象的哪些属性。

在 Vue3.x 中改写成这样：

import { nextTick } from "vue"

nextTick(() =>{ ... })

八 .受影响的 API

这是一个比较大的变化， 因为以前的全局 API 现在只能通过具名导入，这一更改会对以下 API 有影响：

Vue.nextTick

Vue.observable（用 Vue.reactive 替换）

Vue.version

Vue.compile（仅限完整版本时可用）

Vue.set（仅在 2.x 兼容版本中可用）

Vue.delete（与上同）

九.内置工具

除了上面的 API 外， 还有许多内置的组件

以上仅适用于 ES Modules builds，用于支持 tree-shaking 的绑定器——UMD 构建仍然包括所有特性，并暴露 Vue 全局变量上的所有内容 (编译器将生成适当的输出，以使用全局外的 api 而不是导入)。

十.变更

10.1 slot 具名插槽语法

在 Vue2.x 中， 具名插槽的写法：

<!--  子组件中：-->
<slot name="title"></slot>

在父组件中使用：

<template slot="title">
    <h1>歌曲：成都</h1>
<template>

如果我们要在 slot 上面绑定数据，可以使用作用域插槽，实现如下：

// 子组件
<slot name="content" :data="data"></slot>
export default {
    data(){
        return{
            data:["走过来人来人往","不喜欢也得欣赏","陪伴是最长情的告白"]
        }
    }
}
<!-- 父组件中使用 -->
<template slot="content" slot-scope="scoped">
    <div v-for="item in scoped.data">{{item}}</div>
<template>

在 Vue2.x 中具名插槽和作用域插槽分别使用 slot 和 slot-scope 来实现， 在 Vue3.0 中将 slot 和 slot-scope 进行了合并同意使用。

Vue3.0 中 v-slot：

 <!-- 父组件中使用 -->
 <template v-slot:content="scoped">
   <div v-for="item in scoped.data">{{item}}</div>
</template>
<!-- 也可以简写成： -->
<template #content="{data}">
    <div v-for="item in data">{{item}}</div>
</template>

10.2 自定义指令

首先回顾一下 Vue 2 中实现一个自定义指令：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

在 Vue 2 中， 自定义指令通过以下几个可选钩子创建：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

在 Vue 3 中对自定义指令的 API 进行了更加语义化的修改， 就如组件生命周期变更一样， 都是为了更好的语义化， 变更如下：

所以在 Vue3 中， 可以这样来自定义指令：

const { createApp } from "vue"
const app = createApp({})
app.directive('focus', {
    mounted(el) {
        el.focus()
    }
})

然后可以在模板中任何元素上使用新的 v-focus 指令， 如下：

<input v-focus />

10.3 v-model 升级

在使用 Vue 3 之前就了解到 v-model 发生了很大的变化， 使用过了之后才真正的 get 到这些变化， 我们先纵观一下发生了哪些变化， 然后再针对的说一下如何使用：

变更：在自定义组件上使用 v-model 时， 属性以及事件的默认名称变了

变更：v-bind 的.sync 修饰符在 Vue 3 中又被去掉了, 合并到了 v-model 里

新增：同一组件可以同时设置多个 v-model

新增：开发者可以自定义 v-model 修饰符

有点懵？别着急，往下看 在 Vue2 中， 在组件上使用 v-model 其实就相当于传递了 value 属性， 并触发了 input 事件：

<!-- Vue 2 -->
<search-input v-model="searchValue"><search-input>

<!-- 相当于 -->
<search-input :value="searchValue" @input="searchValue=$event"><search-input>

这时 v-model 只能绑定在组件的 value 属性上，那我们就不开心了， 我们就像给自己的组件用一个别的属性，并且我们不想通过触发 input 来更新值，在.async 出来之前，Vue 2 中这样实现：

// 子组件：searchInput.vue
export default {
    model:{
        prop: 'search',
        event:'change'
    }
}

修改后， searchInput 组件使用 v-model 就相当于这样：

<search-input v-model="searchValue"><search-input>
<!-- 相当于 -->
<search-input :search="searchValue" @change="searchValue=$event"><search-input>

但是在实际开发中，有些场景我们可能需要对一个 prop 进行“双向绑定”， 这里以最常见的 modal 为例子：modal 挺合适属性双向绑定的，外部可以控制组件的 visible 显示或者隐藏，组件内部关闭可以控制 visible 属性隐藏，同时 visible 属性同步传输到外部。组件内部， 当我们关闭 modal 时, 在子组件中以 update:PropName 模式触发事件：

this.$emit('update:visible', false)

然后在父组件中可以监听这个事件进行数据更新：

<modal :visible="isVisible" @update:visible="isVisible = $event"></modal>

此时我们也可以使用 v-bind.async 来简化实现：

<modal :visible.async="isVisible"></modal>

上面回顾了 Vue2 中 v-model 实现以及组件属性的双向绑定，那么在 Vue 3 中应该怎样实现的呢？

在 Vue3 中,在自定义组件上使用 v-model,相当于传递一个 modelValue 属性， 同时触发一个 update:modelValue 事件：

<modal v-model="isVisible"></modal>
<!-- 相当于 -->
<modal :modelValue="isVisible" @update:modelValue="isVisible = $event"></modal>

如果要绑定属性名， 只需要给 v-model 传递一个参数就行, 同时可以绑定多个 v-model：

<modal v-model:visible="isVisible" v-model:content="content"></modal>

<!-- 相当于 -->
<modal
    :visible="isVisible"
    :content="content"
    @update:visible="isVisible"
    @update:content="content"
/>

不知道你有没有发现，这个写法完全没有.async 什么事儿了， 所以啊，Vue 3 中又抛弃了.async 写法， 统一使用 v-model

10.4 异步组件

Vue3 中 使用 defineAsyncComponent 定义异步组件，配置选项 component 替换为 loader ,Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise，用法如下：

<template>
  <!-- 异步组件的使用 -->
  <AsyncPage />
</tempate>

<script>
import { defineAsyncComponent } from "vue";

export default {
  components: {
    // 无配置项异步组件
    AsyncPage: defineAsyncComponent(() => import("./NextPage.vue")),
    
    // 有配置项异步组件
    AsyncPageWithOptions: defineAsyncComponent({
   loader: () => import(".NextPage.vue"),
   delay: 200, 
   timeout: 3000,
   errorComponent: () => import("./ErrorComponent.vue"),
   loadingComponent: () => import("./LoadingComponent.vue"),
 })
  },
}
</script>

十一.压缩包体积更小，性能更好

当前最小化并被压缩的 Vue 运行时大小约为 20kB（2.6.10 版为 22.8kB）。Vue 3.0 捆绑包的大小大约会减少一半，即只有 10kB！

vue3.0 六大亮点：

1.vue3.0 比 vue2.0 快 1.2~2 倍

diff 算法优化

vue2 中虚拟 dom 是进行全量对比的

vue3 中新增了静态表示 PatchFlag

​ 在与上次的虚拟节点进行对比时，只对比带有 patch flag 的节点

​ 并且可以通过 flag 的信息得知当前节点要对比的具体内容

静态提升

vue2 中无论元素是否参与更新，每次都会重新创建

vue3 中对于不参与更新的元素，只会被创建一次，之后会在每次渲染时被不停的调用

事件侦听缓存

默认情况下 onClick 会被视为动态绑定，所以每次都会去追踪他的变化，但因为是同一个函数，所以没有追中变化，直接缓存起来复用即可。

2.按需变异，体积比 vue2 更小

3.CompositionAPI 组合 api 类似于 react hooks

4.更好的支持 ts

5.暴露了自定义渲染 api

6.Fragment(<></>)、Teleport（Protal）、Suspense 等更先进的组件

十二.节点打 Tag

静态节点

<span>value</span>

动态节点

<span>{{value}}</span>

vue3.0 底层，会自动识别某个节点是否是动态的，如果是动态的会自动生成标识（不同的动态会有不同的标识对应，如内容文本的动态，或者 id 的动态），从而在每次更新 dom 时，直接跳过哪些静态的节点，直接定位到动态的节点，大大节省效率。

十三.事件开缓存

一般为一个节点设置了监听时间，每次页面进行更新，就会重新生成新的监听函数，启用了 cacheHandlers，就会在第一次更新的时候进行自动识别是否可以缓存，如果可以就进行缓存，这样页面更新就不需要重新生成，尤其是在组件上，极大地减少了子组件的不必要刷新和资源消耗。

Vue 性能优化

1.Vue代码层面的优化

代码层面的优化：

    1.v-if 和 v-show 区分使用场景

    2.computed 和 watch 区分使用场景

    3.  v-for 遍历 ，加 key 值,避免使用 index 作为 key 值

        v-for的同时，避免使用 v-if

    4.长列表性能优化 : Object.freeze() 冻结一个对象,不进行响应式数据劫持

    5.事件销毁

    6.图片懒加载  vue-lazyload

    7.路由懒加载

    8.第三方插件按需引入

    9.优化无限列表性能

    10.服务端渲染 SSR or 预渲染


2.webpack配置层面的优化

    1.webpack 对图片进行压缩

            image-webpack-loader

    2.减少 ES6 转为 ES5 的冗余代码

    3.提取公共样式等等

为什么通常不使用 index 作为 key?

使用 index 作为 key 时，可能存在DOM元素没有发生改变，只是顺序发生了改变，但是此时的 key 的值就发生了改变，根据domdiff算法，就会更新所有key变化的DOM元素

React 性能优化

列表项使用 key 属性
使用碎片

函数式组件中：
父组件一旦发生render渲染，子组件一定也会执行render渲染,在React中如何避免不必要的render
    使用 React.memo 高阶函数包装组件，React.memo 可以实现类似于 shouldComponentUpdate 或者PureComponent 的效果
    使用 useMemo 精细化的管控，useMemo 控制的则是是否需要重复执行某一段逻辑，而React.memo 控制是否需要重渲染一个组件
    使用 useCallBack ，返回一个函数
    useMemo，返回的的是一个值
    在列表需要频繁变动时，使用唯一 id 作为 key，而不是数组下标。
    必要时通过改变 CSS 样式隐藏显示组件，而不是通过条件判断显示隐藏组件。
    使用 Suspense 和 lazy 进行懒加载

    避免使用内联函数

        使用内联函数，则每次调用render函数时都会创建一个新的函数实例

    使用 React Fragments 避免额外标记

    使用 Immutable

    懒加载组件

    事件绑定方式

    服务端渲染

React

jsx

如何理解JSX？
 1、JSX = JavaScript XML，这是一种语法糖
 2、JSX语法，是可选的，但是 React建议使用
 3、JSX语法，浏览器不支持，使用@babel/preset-react进行编译。Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
 4、JSX元素，是对象，也是变量，是表达式，不是字符串
 5、JSX可以任意嵌套，语法是使用 {} 包裹jsx元素
 6、JSX中使用 {/* 注释内容 */}
 7、在JSX中，可以使用表达式（表达式也要使用{}包起来），但不能使用语句
 8、JSX元素的动态属性，也要使用 {} 包裹
 9、在JSX中有三个属性的变化：className，htmlFor, tabIndex
 10、在JSX中，新增属性有：key，ref，dangerouslySetInnerHTML
 11、JSX可防注入攻击(XSS)
 12、自定义组件必须以大写字母开头。
 13、JSX支持属性展开语法 <Child {...obj} />。
 14、布尔类型、Null 以及 Undefined 在JSX中会被忽略，不能当作文本进行渲染
 15、JSX是不可变对象，当JSX元素需要更新时，我们的做法是创建一个新JSX对象，render方法将重新执行并完成DOM渲染（背后的运行机理：this.setState()修改声明式变量，一旦声明式变量发生变化，React系统会生成新JSX对象，对应生成新的虚拟DOM，进而触发Diff运算，找出两个虚拟DOM变化的最小差异，最后把这个最小差异render到DOM上）


 React类(组件) ==实例化后==》JSX元素(React元素)

 TestJsx 是React类（组件）
 <TestJsx/> React元素（JSX元素）



  jsx是  JavaScript XML，这是一种语法糖，是 react 推荐使用的语法
  jsx浏览器默认不支持这种语法，需要使用 @babel/preset/react 进行转译，背后会使用 react.createElement（）这个函数进行调用，转译成浏览器能识别的语法
  jsx 是不可变对象，当jsx需要更新时，react会重新生成一个新的jsx对象，render方法将重新执行并完成DOM渲染（背后的运行机理：this.setState()修改声明式变量，一旦声明式变量发生变化，React系统会生成新JSX对象，对应生成新的虚拟DOM，进而触发Diff运算，找出两个虚拟DOM之间变化的最小差异，最后把这个最小差异 render 到DOM上）
  jsx 动态属性需要使用 花括号 {} 包裹 ，类选择器需要使用 className
  自定义组件必须以大写字母开头
  JSX支持属性展开语法 <Child {...obj} />
  布尔类型、Null 以及 Undefined 在JSX中会被忽略，不能当作文本进行渲染

渲染机制

渲染顺序:

  组件函数的执行顺序是父 → 子

    父组件的 render 函数先执行，生成子组件的 React 元素。

    子组件随后开始渲染

  useEffect 的执行顺序是子 → 父

    子组件的 useEffect 回调先执行，父组件的 useEffect 后执行。

    原因：React 按组件树的渲染顺序收集副作用，但执行时是反向的（类似栈的先进后出）。


  React 的渲染机制是当父组件的 state 或 props 发生变化时，会重新渲染组件及其子组件

    通过 React.memo 或 shouldComponentUpdate 跳过不必要的子组件渲染



  父组件触发渲染
    ↓
  父组件 render() 执行
    ↓
  生成子组件的 React 元素
    ↓
  子组件 render() 执行
    ↓
  子组件 useEffect 回调被计划执行
    ↓
  父组件 useEffect 回调被计划执行
    ↓
  浏览器绘制 DOM（提交阶段）
    ↓
  按子 → 父顺序执行 useEffect 回调



  注意事项:

    避免在子组件中依赖父组件的副作用

      如果父组件的 useEffect 修改了状态，子组件可能需要通过 useEffect 的依赖项监听变化。

    优化子组件渲染

      使用 React.memo 或 useMemo 避免不必要的子组件渲染。

    避免在渲染函数中执行副作用

      副作用应放在 useEffect 中，而不是渲染函数内。

state

如何定义state？只能在构造器中定义。

如何进一步理解state？
1、state是声明式变量，它被 this.setState()修改时，react 会生成一个新的jsx对象，对应会生成一个新的虚拟DOM，并触diff运算，找出他们之间变化的最小差异，通过 render 重新渲染，最终更新DOM视图。
2、state的定义发生构造器中，但是在构造器中不能使用this.setState()
3、要想改变视图，一定要使用this.setState()来修改state。
4、在React中，可以直接修改state，但是这不会触发diff运算，因此视图不会更新。
5、重要原则：当我们修改state时，要考虑新值是否由旧值计算而来，如果是建议使用this.setState(fn)的方式进行修改；如果不是，可以使用this.setState({})
6、this.setState()这个方法是异步的。但是在定时器内部(宏任务)使用this.setState()时，它却是同步的。(微任务==》异步    宏任务==》同步)
7、this.setState({}, fn)，当setState()这个异步操作完成时，第二回调函数会执行，在其中可以拿到最新的state（ 类似于VUe的监听器 ）。
8、当多个this.setState()一起调用时，会被React自动合并成一个setState()操作，触发一次diff运算，一次render()。
9、this.setState()在修改声明式变量时，是一种浅合并。某个声明式变量被修改，不会影响其它声明式变量。
10、state是当组件实例的私有数据，state数据可向子元素传递，而不能向父元素传递，这被称为“React单向数据流”。


state 是声明式变量，要定义在构造器中

在React中，可以直接修改state，但是这不会触发diff运算，因此视图不会更新，要想改变视图，一定要使用 this.setState() 来修改state，但是在构造器中不能使用 this.setState()

当使用this.setState()修改声明式变量时，react 会生成一个新的 jsx对象，对应会生成一个新的虚拟DOM，然后触发 diff 运算 ，并找出他们之间变化的最小差异，通过 render 重新渲染，最终更新DOM视图。

this.setState()这个方法是异步的，但是在定时器内部(宏任务)使用 this.setState()时，它却是同步的。(微任务==》异步    宏任务==》同步)

重要原则：当我们修改 state 时，要考虑新值是否由旧值计算而来，如果是建议使用 this.setState(fn) 的方式进行修改；如果不是，可以使用this.setState({})，this.setState({} || fn ，fn )，第二个参数为一个函数，在其中可以拿到修改的，最新的 state（ 类似于VUe的监听器 ）

当多个this.setState() 一起调用时，会被 React 自动合并成一个 setState() 操作，触发一次diff运算，一次render()。

this.setState()在修改声明式变量时，是一种浅合并。某个声明式变量被修改，不会影响其它声明式变量。

state是当组件实例的私有数据，state数据可向子元素传递，而不能向父元素传递，这被称为“React单向数据流”

如何进一步理解 props

1、在React开发中，props的作用远远比state更强大
2、在类组件和函数式组件中，都默认有props
3、props是父子组件之间的通信纽带
4、props是不能修改的，因为 React 函数式组件使用的是 纯函数（唯一的输入，唯一的输出，入参不能修改）一个函数的返回结果只依赖于它的参数，并且在执行的过程中没有副作用，我们就把该函数称作纯函数
5、props可以传递任何数据类型，还可以传递事件函数和JSX元素、组件
6、props和state不能交叉赋值，它们没有任何关联
7、最新的React中，props验证是由一个第三库prop-types来实现的

state 和 props 的区别

1. state 可以 通过 setState 或 useState 进行修改，而 props 是外部传入的数据，不能修改

2. props的功能非常强大，可以传递任何数据类型，还可以传递事件函数和JSX元素、组件

3. react一个重要的开发原则 ：一切外部数据都要经过 props 传递进来

生命周期

三个阶段 ：
    1.装载阶段：
    React组件实例化时，调用constrouctor（）
         在这个生命周期中，不能使用this.setState()-
         在这个生命周期中，不能使用副作用（调接口、dom操作、定时器、长连接）
         不能把props和state交叉赋值
    componentDidMount()
         相当于是vue中的mounted()
         它表示DOM结构在浏览器中渲染已完成
         在这里，可以使用任何的副作用（调接口、定时器、DOM操作、长连接。。。）
         在这里，可以使用this.setState()
    render()
         是类组件中唯一的一个必须要有的生命周期
         这个render函数必须要有return，return结果只要满足jsx语法都可以。
         它的return返回jsx默认只能是单一根节点，但是在Fragment的语法支持下，可以返回多个兄弟节点。
         Fragment碎片的写法：<React.Fragment></React.Fragment>，简写成<></>
         在return之前，可以做任意的业务逻辑（但不能使用this.setState()）
         每当this.setState修改声明式变量时，会触发diff运算，进而触发render()重新渲染。
         render()这个生命周期，在装载阶段和更新阶段都会运行。
         当render()返回null时，不影响生命周期的正常运行。
    2.更新阶段（2）
        shouldComponentUpdate()
         它相当于是一个开关，如果它返回true则更新机制正常执行，如果返回false则更新机制停止.
         在vue中是没有的，所在React面试经常问题。
         它存在的意义：可以用于性能优化。但是基本上用不到，最新的解决方案是使用PureComponent。
         理论上这个生命周期的作用是：用于精细地控制声明式变量的更新问题，如果被变化的声明式变量参与了视图渲染则返回true；如果被变化的声明式变量没有直接或间接参与视图渲染则返回false，以减少diff运算。
        render()
        componentDidUpdate()
             相当于是vue中的updated()
             它表示DOM结构渲染更新已完成，只发生在更新阶段
             在这里，可以执行大多数的副作用，但是不建议
             在这里，可以使用this.setState()，但是必须要有终止条件判断，避免死循环。
     3.销毁阶段
        componentWillUnmount()
         相当于是vue中的beforeDestroy()
         一般在这里清除定时器、长连接等其它占用内存的变量
         在这里一定不可以使用this.setState()

类组件与函数式组件有什么区别

类组件，要用 class 关键字来定义，它有state状态，有生命周期、有this，有ref，有上下文。类组件的缺点是相对于函数式组件来说，运行速度相对较慢、性能较差。

 函数式组件，默认啥都没有(除了props)，也就是说默认没有类组件那些特性。函数式组件的好处是运行速度较快，性能更好。（使用 Hooks(v16.8)可以模拟出像类组件一样的众多特性）

 类组件使用要实例化，而函数组件直接执行取返回结果即可

表单绑定（React 表单是单向绑定的）

1、受控表单：指的是表单的 value/checked 属性由 state 控制 ，绑定 onChange 事件，手动取值
2、非受控表单：指的是表单的value/checked属性不由state控制。
原则：在React开发中尽可能地都使用受控表单，但是有一个例外，就是文件上传

<input type="file" />

状态提升（是一种数据共享的理念）

 要解决的问题：多个组件之间数据共享的问题。
 怎么做？具体的做法是，找到这几个组件的最近的父组件，把需要共享的状态数据定义在父组件中。

组合 vs 继承

组合和继承，都是 组件复用 的一种思想（方式）, 但是 React 官方推荐使用 组合模式 来实现组件的复用。

组合的语法基础是：props.children 和 render props（自定义属性可以传递 React元素（jsx元素））

在父组件中间 插入标签 ，子组件直接使用 props.children 进行渲染

render props ==> props 可以传递任何数据类型，还可以传递 事件函数 和 JSX元素、组件(*),子组件可以直接通过 props 进行调用


如果使用“继承”思想，如何复用组件？思路如下：
    class QfModel extends React.Component {}  // 基类
    class QfDeleteModal extends QfModal {}    // 删除类型Modal
    class QfConfirmModal extends QfModal {}
    class QfDeleteSmallModal extends QfDeleteModal = {}

conText(上下文)

 作用：自上而下地向组件树中注入数据 （数据共享）

 注意：在上下文的消费者（实际上就是那些被上下文包裹的组件）中不能修改上下文

 怎么使用上下文呢？

 1、使用 React.createContext() 创建上下文对象

 2、使用上下文对象上的 <xxx.Provider value={xxx}></Provider> 组件，向React组件树注入数据

    <ThemeCtx.Provider value={theme}>
        <Layout />
    </ThemeCtx.Provider>

3、使用上下文对象上的 <xxx.Consumer>{()=>()}</xxx.Consumer> 组件，使用上下文数据
    类组件写法：
     <ThemeCtx.Consumer>
         {
             theme => (
                 <div style={{background:theme.background,color:theme.color}}>
                     <h1>测试上下文</h1>
                 </div>
             )
         }
      </ ThemeCtx.Consumer>

在函数式组件中如何使用上下文数据呢？

  第1种语法：return (<Consumer>{ ctx => <jsx />}</Consumer>)
  第2种语法：使用 useContext('上下文对象') 访问上下文数据

 上下文在哪些第三库中会用到呢？React-Router，Mobx，Redux

高阶组件

高阶组件是一种 代码逻辑复用 的高级技巧，结合了 React 的组合特性，在很多第三方库 路由、mobx、redux
中有 用到，也叫高阶函数，本质上是一个函数（纯函数）
作用：高阶组件（也被称之为容器组件），是用来修饰、装修UI组件的，实现业务逻辑的复用。
语法详解：高阶组件（高阶函数）接受一个 UI组件（React类） 作为入参，返回一个新的UI组件（React类）
export default WrapComponent => { return props=>(
<WrapComponent {...props} dialog="{dialog}" img="{img}" />
) } 注意点: 当一个UI组件被多个高阶组件修饰时，props会丢失，需要使用 ...props，保留高阶组件修饰后的
props 语法：hocFn(UIComponent){return
<NewUIComponent {...this.props}
  >} 属性继承 使用原则：一个高阶组件，一般只复用一个可以复用的逻辑。 类组件中可以使用 装饰器语法 //
  1、什么是高阶组件？ // - 高阶组件（Higher Order
  Component）本质上是纯函数，它接收一个React组件作为入参，返回一个新的React组件。所以，高阶组件也常常叫做高阶函数。
  // -
  两个概念：这个被入参的React组件，常常被称之为“UI组件”。这个高阶组件（纯函数），被称之为“容器组件”。
  // - 语法1：const hoc1 = UI => (新组件) // - 语法2：const hoc2 = (...args) => (UI => (新组件)) //
  -
  什么是纯函数？如果一个函数，其函数体中不对入参做任何修改，并且相同入参永远得到相同的返回值，这样的函数就是纯函数。
  // 面试题：在React中哪些场景下会用到纯函数？函数式组件、高阶组件、Redux的reducer函数。 //
  2、高阶组件的意义 // -
  高阶组件不是什么新语法（不是新API），而是一种代码复用技巧，是类组件编程的产物。 // -
  作用：代码逻辑的复用。 // -
  理解：高阶组件实际上是在对入参（UI组件）进行若干的修饰，比如给UI组件添加公共的视图结构、公共的方法或属性等。
  // - 面试题：你在工作中有没有封装过高阶组件？解决过什么具体的问题？（权限设计、注入工具方法） //
  3、关于封装高阶组件的若干注意事项 // - 在封装高阶组件时，都要做“属性继承”，避免props丢失。 // -
  在封装高阶组件时，如果配合ref一起使用，可能遇到其它“坑”，请参考文档中的说明。
</NewUIComponent>

如何创建 refs

refs是提供一种访问在render方法中创建DOM节点或者React元素的方法，在典型的数据流中，props是父子组件交互的唯一方式，想要修改子组件，需要使用新的props重新渲染它，某些情况下，在典型的数据流外，强制修改子代，这个时候可以使用refs

我们可以在组件添加一个ref属性来使用，该属性是一个回调函数，接收作为其第一个参数的底层DOM元素或组件挂载实例

通过React.createRef（）创建的，并通过ref 属性附加到react元素，在构造组件中，

通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们

import React, { createRef } from 'react';

const caseDetailRef = createRef();

或者 使用 useRef

caseDetailRef.current?.xxx

对Dom元素的焦点控制、内容选择、控制
对Dom元素的内容设置及媒体播放
对Dom元素的操作和对组件实例的操作
集成第三方 DOM 库


 1、ref属性（其一是一种快捷的DOM访问方式，其二用于引用一个变量）

 2、ref的三种使用场景
   - 场景1：ref作用在普通的HTML节点上，返回的是DOM对象
   - 场景2：ref作用在类组件上，返回的是类组件实例对象
   - 场景3：ref作用在函数式组件上（默认会报错，原因是函数式组件没有实例对象），配合forwardRef转发可以访问函数式组件内部的DOM对象。

 3、ref三种语法
   语法1：<div ref='box' />   // this.refs.box
   语法2：<div ref={dom=>this.boxRef=dom} />   // 使用ref={callback} 手动收集ref对象(DOM对象、类组件实例)
   语法3：<div ref={createRef()的返回值} />  // const ref = createRef()  通过ref.current来访问DOM对象或类组件实例
   注意：以上三种语法，不仅可以作用在HTML节点上，作用在类组件上也是没有问题的。

 4、特殊场景；ref配合forwardRef一起，作用在函数式组件上！
   - 当ref属性作用在“自定义的函数式组件”上时，默认会报错。
   - 这时就要用到React.forwardRef((props,ref)=>(<jsx/>))来解决问题。这时访问的不是函数式组件实例，而函数式组件内部的某一个变量（DOM节点，也可能是一个普通的非DOM变量）
   - 语法：const FC = forwardRef((props, ref)=>(<jsx ref={ref}/>))
   - 补充：后面在讲 Hooks API 时，还有两个 useRef / useImperativeHandle 和ref使用息息相关！

Hooks （React 16.8 新增）

useState
 作用：用于定义声明式变量，模拟类组件中的 state
 语法：const [msg, setMsg] = useState('')
 useState在定义声明式变量时，一定要赋初始值
 useState定义的声明变量，要使用 set*系列方法去更新，不建议直接修改

 useEffect
 如何理解副作用？你可以这么理解，只要不是生成JSX的业务代码，都可以认为是副作用
 副作用包括定时器、调接口、长连接、DOM操作、第三库的初始化等
 作用：模拟类组件中生命周期的特性
 语法：useEffect(()=>{return ()=>{}}, [])
 useEffect 可以看做是 componentDidMount，componentWillUnmount 和 componentDidUpdate  这三个函数的组合

 useEffect 有两个参数 ，第一个参数为一个函数 （相当于生命周期里面的 componentDidMount ）这个函数里面还可以 return 一个函数（这个 return 的函数相当于 componentWillUnmount），第二个参数为一个数组，相当于 componentDidUpdate ，（可以把相关联的声明式变量放在里面，每当变量发生变化。就会重新执行）

 在函数组件中，useEffect是用于执行副作用的主要钩子。当涉及到父子组件时，子组件的useEffect会在父组件的useEffect之前执行

常用 Hooks

useState
useEffect
useContext
useMemo 计算属性
useCallback
useRef
    const inputRef = useRef<any>(null);
    inputRef.current.blur()

默认情况下，每当一个组件中重新渲染，其中的函数都会重新声明。这样就会导致一个问题：如果该组件将这个函数传递给子组件，那么子组件也会重新渲染，但有时这样的渲染是不必要的

相同点：useCallback 和 useMemo 都是性能优化的手段，类似于类组件中的 shouldComponentUpdate，在子组件中使用 shouldComponentUpdate， 判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。


 useCallback 和 useMemo 的区别是useCallback返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次父组件更新时都重新渲染这个子组件

 const renderButton = useCallback(
     () => (
         <Button type="link">
            {buttonText}
         </Button>
     ),
     [buttonText]    // 当buttonText改变时才重新渲染renderButton
);

useCallback 的返回值是函数，所以适合对组件的事件响应函数进行处理，避免每次执行都生成新的函数，进而导致子组件属性不同而重新渲染。

useMemo 因为返回值是任意值，所以可用用来做高耗时操作的缓存处理，比如组件需要的一些子组件，比较耗时的纯数值计算等。

简单概括就是：useCallback 用来处理事件函数，useMemo 用来缓存 DOM

路由 Hooks

useParams：获取参数（内部封装）
useHistory：通过js api操作路由跳转 push方法
useLocation: 查看当前路由
useRouteMatch: 挂钩尝试以与<Route>相同的方式匹配当前URL。在无需实际呈现<Route>的情况下访问匹配数据最有用。

Redux Hooks

用于 替代 connect 这个高阶组件
useSelector 相当于 mapStateToProps
useDispatch 相当于 mapDispatchToProps

Hooks 使用需要注意什么？

1.版本： 16.8 新增的特性

2.只能在函数式组件中使用

3.只能在函数式组件的最顶层使用hooks，而不能在for循环、if等语句下面使用hooks
    因为函数组件中可以使用useState声明多个state，hooks的状态管理依赖于数组，hooks重新渲染的时候依赖于固有的顺序，如在for循环、if等语句下使用hooks就有可能在重渲染时改变hooks的固有顺序，导致bug。这与hooks的实现原理有关系。

如何避免组件的重新渲染？

React.memo() 这可以防止不必要地重新渲染函数组件

PureComponent 这可以防止不必要地重新渲染类组件

这两种方法都依赖于对传递给组件的props的浅比较，如果 props 没有改变，那么组件将不会重新渲染。虽然这两种工具都非常有用，但是浅比较会带来额外的性能损失，因此如果使用不当，这两种方法都会对性能产生负面影响。

Mobx

状态管理（数据管理）
 Flux（是一套数据架构的思想）是 Facebook 提出的
 Vuex、Mobx、Redux它们都是 Flux 思想指导下的一种具体的解决方案
 状态管理工具：可预测状态的数据容器。

 在React技术栈：mobx 和 redux

 一般情况下，小项目可以考虑使用 mobx 6 & mobx-react 7
 如果是大项目，建议使用 redux & react-redux

 原则：在React规范中，一切外部数据都要从props进入组件，所以几乎是一定要使用状态管理工具。

 如何使用：

 从 mobx-react 中，引用 Provider

 在App根组件中，使用<Provider store={store}} /> ，注入 store

 在React组件中，使用 inject('要使用的store中的数据')(observer(props=>(<div></div>)))


 - 以下mobx(v6) + mobx-react(v7) 用ES6语法、函数式组件为例，说明集成mobx架构的一般步骤：
  - 1、安装mobx(v6)，用面向对象语法编写store和子store的代码逻辑，参见store目录。
  - 2、安装mobx-react(v7)，在App根组件中，使用<Provider {...store} />
  - 3、在React组件中，使用 inject('stort')(observer(props=>(<div></div>)))


 先使用 observer（） 将组件变为观察者，然后再使用 inject （）注入需要共享的数据

 语法：inject('store')observer((UIComponent))

 observer(UIComponent) 它的作用是把React组件变成观察者。
 特点：当mobx中被观察的数据发生变化时，观察者自动更新。

 inject('store')(UIComponent) 它的作用是注入mobx中的状态数据
 特点：一旦注入成功，在props上就可以直接访问。

// 【[mobx6]定义子Store第一种写法】 makeAutoObservable

import { makeAutoObservable } from 'mobx'

// makeAutoObservable(this) 作用是把当前对象上的成员属性变成observable变量，把成员方法变成action方法。

export default class UserStore {
  constructor() {
    makeAutoObservable(this)
  }
  token = 'token'
  changeMsg(payload) {
    this.token = payload
  }
}

// 【[mobx6]定义子Store第二种写法】
// makeObservable  根据开发者的需求，把指定的成员属性变成observable变量，把成员方法变成action。
// 当在action中需要用到同步的async/await时，建议使用 flow，编写generator的语法。
// observable 它用于把一个变量变成可观察的，当它变化时，在观察者中可以自动更新
// action 表示把一个方法变成action，它可以直接修改observable变量
// computed 用于get操作，是计算属性，当它所关联的observable变量发生变化时，会重新计算
import { makeObservable, action, computed, observable } from 'mobx'
export default class TodoStore {
  constructor() {
    makeObservable(this, {
      msg: observable,
      changeMsg: action,
      length: computed,
      list: observable,
      updateList: action,
    })
  }
  msg = 'hello mobx 2'
  changeMsg(payload) {
    this.msg = payload
  }
  get length() {
    return this.msg.length
  }
}

React 中的组件间通信

- 父子组件通信 props
- 自定义事件
- 使用 context 上下文
- 使用 mobx、redux 状态管理
- 状态提升

create-react-app 设置代理

1.在 package.json 中 直接配置 proxy字段

2.下载中间件 http-proxy-middleware
在 src 目录下，新建 setupProxy.js 文件

redux

redux 用于定义 store 的

react-redux 提供高阶组件（connect） 和 Hooks 写法 ,用于把 react 和 redux 连接起来

Redux 一个可预测状态的数据容器，它是基于Flux思想而开源的项目

第一个3，指的是三个api：createStore / combineReducers / applyMiddleware

    createStore 用来创建 store
    combineReducers 用来合并多个 reducers
    applyMiddleware 使用中间件

 第二个3，指的是Redux工作流程中的三个核心概念，分别 Store、 Action(Dispatch)、 View

 第三个3，指的是Store的三个特点：Store单一数据源、Store是只读的、Store 只能通过 Reducer 纯函数进行修改

 技术栈：Redux / React-Redux / Redux-Thunk / Redux-Saga ....

三个 Api : createStore( ) / combineReducers( ) / applyMiddleware( )

import { createStore } from 'redux'
createStore( reducer,{},middleware(中间件)) 创建 store
combineReducers({}) 合并多个 reducer纯函数
import xxx from xxx
const rootReducer = combineReducers({
    study,
    count,
    music,
    user,
    article
})
const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
 )
export default store

connect 高阶组件写法

使用 createState（reducer）创建 Store ，然后 在 react-redux 中 引入 Provider 组件，引入 Store，并在 Provider 组件上注入 Store  ，然后继续在

react-redux 引入高阶组件 connect

connect 语法 ：connect（fn1 ，fn2）（UIComponent）

    fn1，fn2  两个都要返回一个对象

    connect（mapStateToProps ，mapDispatchToProps）（UIComponent）

mapStateToProps 和 mapDispatchToProps 两个都要返回一个对象

mapStateToProps 的形参 是一个 store ， // 把状态管理中的 state 映射到 props 上 ，然后就可以在 props 上进行访问

mapDispatchToProps 的形参是一个 dispatch

// 把状态管理中的 state 映射到 props 上 ，然后就可以在 props 上进行访问
const mapStateToProps = (store) => {
  return {
    msg: store.msg,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    changeMsg: () => dispatch({}),
  }
}

页面使用

export default connect(mapStateToProps, mapDispatchToProps)(UIComponent)

reducer 纯函数，用于修改 store 数据

let initState = {
  msg: 'hello redux',
}

// reducer 是一个纯函数，唯一的输入得到唯一的输出
// 在 redux 中 ，只能使用 reducer 来修改 store（state）
// 深入理解 action ，它只能是一个 Plain Object（一个对象，可以被深复制的）。它只能通过 diapatch （action={}），派发到 Store 中
function reducer(state = initState, action) {
  // 因为 store 是 只读的，所以要进行深复制
  let newState = { ...state }
  switch (action.type) {
    case '':
      // do something
      break
    default:
    // do something
  }
  return state
}

const store = createStore(reducer)

export default store

redux Hook 写法，可以用来代替 connect 这个高阶组件

import { useSelector, useDispatch } from 'react-redux'

// useSelector 相当于 mapStateToProps
const msg = useSelector((store) => store.study.msg)
// useDispatch 相当于 mapDispatchToProps
const dispatch = useDispatch()

dispatch(msgChange('hello world'))

redux-thunk 中间件

在 redux 中，dispatch 是同步的，它负责向 store 中派发 plain action object

redux-thunk 用于解决 redux 不支持异步 actions的问题

redux 只支持同步的 action ，需要使用中间件（redux-thunk 或者 redux-saga）解决异步 action

用于异步的 生成器， 必须要 return 一个函数，然后用 redux-thunk

redux-thunk 这个中间件，在 View - Store 之间起作用，它用于判断 action 是不是 函数（fn）, 如果是就构建一个 plain object ，发送给 store

redux，实际上发生了 两次 dispatch  ，第一次 redux 什么都没做，第二次才是真正后端数据放入 redux 中

const store = createStore( reducer , applyMiddleware ( thunk ) )

当需要使用多个 中间件时

import { compose } from 'redux'
const store = createStore(
    reducer ,
    compose( applyMiddleware ( thunk ), applyMiddleware ( xxx ))
)

compose 解决 使用多个中间件时，嵌套过多的问题

    applyMiddleware ( thunk )( xxx )

    applyMiddleware 返回本身

中间件（Middlewa)

其本质上一个函数，对 store.dispatch 方法进行了改造，在发出 action 和执行 reducer这两步之间，添加了其他功能

redux-thunk：用于异步操作
redux-logger：用于日志记录

代码分割

loadable 是一个函数

import loadable from "@loadable/component"

const TestJsx = loadable(()=>import('./study/TestJsx'))

React Fiber --- React 背后的算法

React 15 中的 virtualDOM，这是旧的协调算法

React Fiber 是 React 16 中新的协调算法

react fiber是通过 requestIdleCallback 这个api去控制的组件渲染的“进度条”

react 无法精确更新，所以需要react fiber把组件渲染工作切片

Redux-toolkit

npm install typescript @types/react @types/node redux react-redux @reduxjs/toolkit

持久化处理

src / store / slice / counterSlice.ts;

import { createSlice } from "@reduxjs/toolkit";

interface CounterState {
  value: number;
}
interface stateType {
  actions: () => void;
  counter: CounterState;
}

export const counter = createSlice({
  name: "counter",
  initialState: {
    value: 100,
  },
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    // action 接收页面传过来的参数
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const value = (state: stateType): number => {
  return state.counter.value;
};

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counter.actions;

export default counter.reducer;

src / store / store.ts

import { combineReducers, configureStore } from '@reduxjs/toolkit'
// 持久化
import { persistReducer, persistStore } from 'redux-persist'
// defaults to localStorage for web
import storage from 'redux-persist/lib/storage'
//
import counter from './slice/counterSlice'

const persistConfig = {
  key: 'root', // key to identify your persisted data
  storage, // where you want to store the data (e.g., localStorage)
  whitelist: ['counter'], // state slices you want to persist, if not all
}
const reducer = combineReducers({
  counter,
})

const persistedReducer = persistReducer(persistConfig, reducer)

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
})

export const persistor = persistStore(store)

在根文件（index.tsx | main.tsx | _app.tsx）

import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "../store/store";

<Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
        <Component {...pageProps} />
    </PersistGate>
</Provider>

react diff 算法 的原理是什么

传统diff算法通过循环递归对节点进行依次对比，然后判断每个节点的状态以及要执行的操作，效率低下，算法复杂度高，达到 O(n^3)，react将 diff算法 进行一个优化，复杂度降为O(n)

React中使用「三个层级策略」对传统的diff算法进行了优化

主要遵循三个层级的策略：tree层级、component层级、element层级

    Tree层级：DOM节点跨层级的操作不做优化，只会对相同层级的节点进行比较，只有删除、创建操作，没有移动操作

    Component层级：同一个类的组件，会继续往下diff运算，更新节点属性,如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的

        如果确切知道该组件可以不用更新，可以使用react生命周期函数 shouldComponentUpdate() 方法进行判断优化，阻断不必要的 render

    Element层级：同层级的单个节点进行比较，（对于比较同一层级的节点们，每个节点在对应的层级用唯一的key作为标识）用唯一的 key 作为标识，通过 key 可以准确地发现新旧集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将旧集合中节点的位置进行移动，更新为新集合中节点的位置

tree 层级:

components 层级:

vue 的 diff 算法与 react 的 diff 算法的区别

vue 的 diff 算法

在对新旧虚拟dom进行比较时，是从节点的 两侧向中间 对比；如果节点的 key值 与 元素类型 相同，属性值不同，就会认为是不同节点，就会删除重建

react 的 diff 算法

在对新旧虚拟dom进行比较时，是从节点的 左侧 开始对比，就好比将新老虚拟dom放入两个栈中，一对多依次对比；如果节点的 key值 与 元素类型 相同，属性值不同，react会认为是同类型节点，只是修改节点属性


react diff算法也有明显的不足与待优化的地方:

    应该尽量减少将最后一个节点移动到列表首位的操作

    当一个集合把最后一个节点移动到最前面，react会把前面的节点依次向后移动，而Vue只会把最后一个节点放在最前面，这样的操作来看，Vue的diff性能是高于react的

两种 diff 算法的相同点

都只进行同级比较，忽略了跨级操作；常见的现象就是对数组或者对象中的深层元素进行修改时，视图层监测不到其变化，故不会对dom进行更新，需调用一些特质方法来告诉视图层需要更新dom

i18n-next(国际化)

react-query

react-query 是一个用于在 React 应用中管理服务器状态的库。它提供了一组强大的工具来处理数据获取、缓存、同步和更新，简化了与服务器交互的复杂性。react-query 通过 hooks 提供了简单且声明式的 API，使得数据获取和管理变得更加容易和高效。

主要功能

• 数据获取和缓存：自动缓存数据，并在需要时重新获取。
• 后台数据同步：在后台自动同步数据，保持数据最新。
• 错误处理：提供内置的错误处理机制。
• 分页和无限滚动：支持分页和无限滚动的数据获取。
• 数据预取：在用户需要之前预取数据，提高用户体验。

主要 Hooks

• useQuery：用于获取数据。
• useMutation：用于提交数据或执行其他副作用。
• useQueryClient：用于管理和操作查询客户端。

示例

1. 安装 react-query

首先，安装 react-query 和 react-query-devtools（可选，用于开发调试）：

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

2. 配置 QueryClient

在应用的根组件中配置 QueryClient 和 QueryClientProvider：

import React from 'react'
import ReactDOM from 'react-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import App from './App'

const queryClient = new QueryClient()

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

3. 使用 useQuery 获取数据

在组件中使用 useQuery 获取数据：

import React from 'react'
import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

const fetchTodos = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/todos')
  return data
}

const Todos = () => {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos)

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

export default Todos