前端较为常见的面试题八股文笔记-持续更新2024

一、HTML

1、对HTML语义化的理解
通俗来讲就是用正确的标签做正确的事情。

● 使结构更加清晰，便于理解
● 有利于seo。
● 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页
● 便于团队开发和维护

常用的语义化标签
<header>头部
<nav> 导航
<article>主要内容
<main>主要区域
<section>区块
<aside>侧边栏
<footer>底部

2、HTML中href、src区别
● href(表示超文本引用)
建立当前元素和文档之间的链接（常用的有：link、a）
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，这也是为什么建议把 js 脚本放在底部而不是头部的原因。
● src(表示资源的引用)
指向的资源下载并应⽤到⽂档内，并且替换当前内容（常用的有script，img ）
浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。

3、script标签中defer和async的区别
● 都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析
● 没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
● async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行。
● defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

4、HTML5有哪些更新
语义化标签、媒体标签、 Web存储、DOM查询操作、表单类型、表单属性、表单事件、Canvas绘图、SVG画图、拖放API

● 语义化标签：header、nav、section、aside、article、footer。
● 媒体标签：audio音频、video视频
● Web存储：
localStorage - 长期存储数据，浏览器关闭后数据不丢失。
sessionStorage - 的数据在浏览器关闭后自动删除。
● DOM查询操作：
document.querySelector()
document.querySelectorAll()
● 表单
表单类型：
email ：能够验证当前输入的邮箱地址是否合法
url ： 验证URL
number ： 只能输入数字，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
color ： 提供了一个颜色拾取器
time ： 时分秒
data ： 日期选择年月日
datatime ： 时间和日期(目前只有Safari支持)
datatime-local ：日期时间控件
week ：周控件
month：月控件

表单属性：
placeholder ：提示信息
autofocus ：自动获取焦点
autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
required：要求输入框不能为空，必须有值才能够提交。
pattern=" " 里面写入想要的正则模式，例如手机号patte=“^(+86)?\d{10}$”
multiple：可以选择多个文件或者多个邮箱
form=" form表单的ID"

表单事件：
oninput 每当input里的输入框内容发生变化都会触发此事件。
oninvalid 当验证不通过时触发此事件。
● Canvas绘图
● SVG画图
● 拖放API

5、label 的作用是什么？如何使用？
label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。
二、CSS
CSS基础
1、CSS的盒子模型
CSS盒模型本质上是一个盒子
它包括：外边距（margin），边框（border），内边距（padding），和实际内容（content）

在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度

可以通过修改元素的box-sizing属性来改变元素的盒模型
box-sizing:content-box; 盒模型设置为w3c标准盒子模型
box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型

2、css选择器以及优先级
● 选择器：
id选择器，类选择器，标签选择器，后代选择器，子选择器，相邻兄弟选择器，群组选择器，通配符选择器；
属性选择器，伪类选择器，伪元素选择器
● 优先级：!important>内联样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）

3、隐藏元素的方法有哪些
● display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
● visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
● opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
● position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
● z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
● clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
● transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件

4、link和@import的区别是什么
● link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
● link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
● link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
● link支持使用Javascript控制DOM去改变样式；而@import不支持

5、display:none与visibility:hidden的区别
● display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
● visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

6、img 上 title 与 alt
title 是在悬浮时展示的提示文字，alt 是在图像无法正常显示时展示的提示文字

7、清除浮动的方法
为什么清除浮动：元素脱离文档流，盒子塌陷，对页面造成影响
● 给父级添加一个高度
● 在浮动元素之后添加一个空的div标签，并添加clear:both样式
● 给父级添加 overflow:hidden
● 使用 :after 伪元素

8、CSS尺寸单位
● px：绝对像素
● rem：相对于根元素像素
● em：相对于父元素像素
● vw：视口宽度
● vh：视口高度

9、常见的行内元素、块级元素
1、块级元素（div,p,h1…h6,ol,ul,table）
独自占一行、元素的高度宽度都是可以设置的
2、行内元素（span,a,img,input,textarea）
可以和其他元素处于一行上，元素的高度宽度顶部和底部边距不可设置

10、BFC
BFC即块级格式化上下文，是一个独立的容器，内部的元素和外部元素互不影响
形成条件：
根元素，即HTML元素
float不为none
overflow值不为 visible
position的值为absolute或fixed
display的为inline-block等等

11、CSS3新特性
● c3盒模型box-sizing
● flex布局
● transition过渡
● transform2D转换
● background-size背景缩放
● border-radius圆角
…

CSS布局及应用
1、常见水平垂直方式有几种?
● 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。
● 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况
● 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：
●

三、JS

1、JavaScript有哪些数据类型
JavaScript共有八种数据类型:
● 基本数据类型：Undefined、Null、Boolean、Number、String、Symbol、BigInt。
● 引用数据类型：object（包括Array，Function、Object类等）
基本数据类型存储在栈中，占据空间小，属于被频繁使用的数据。
引用数据类型存储在堆中，占据空间大，它的地址在栈中，一般我们访问就是它的地址。

2、null和undefined区别
undefined 代表的含义是未定义，null 代表的含义是空对象。

3、数据类型检测的方式有哪些
● typeof
其中数组、对象、null都会被判断为object，其他判断都正确。typeof 返回值是一个字符串
● instanceof
instanceof可以正确判断对象的类型，其内部运行机制是判断在其原型链中能否找到该类型的原型。
● constructor
constructor有两个作用，一是判断数据的类型，二是对象实例通过 constrcutor对象访问它的构造函数。需要注意，如果创建一个对象来改变它的原型，constructor就不能用来判断数据类型了：
● Object.prototype.toString.call()
Object.prototype.toString.call() 使用 Object 对象的原型方法 toString 来判断数据类型

4、判断数组的方式有哪些
通过instanceof做判断
通过Object.prototype.toString.call()做判断
通过ES6的Array.isArray()做判断
通过原型链做判断

8、数组常用方法
pop() ， push()， shift() ， unshift()，concat(），slice()，splice() ，reverse() ，sort()，toString()、join() ，every()、some()、filter()、map()，forEach()等

9、New操作符做了什么
1、首先创建一个空对象
2、将新对象的__proto__（原型）指向构造函数的prototype（原型对象）
3、将此对象作为this的上下文（改变this指向）
4、判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象

new关键字后面的构造函数不能是箭头函数。

10、es6中的箭头函数
箭头函数是ES6中的提出来的，它没有prototype，没有自己的this指向，更不可以使用arguments参数，所以不
能New一个箭头函数。

11、==和===区别
● ==返回一个布尔值；会默认进行数据类型之间的转换； 如果是对象数据类型的比较，比较的是空间地址
●===只要数据类型不一样，就返回false；

12、cookie sessionStorage localStorage 区别
● 都是浏览器存储，都存储在浏览器本地
●cookie由服务器写入， sessionStorage以及localStorage都是由前端写入
●cookie的生命周期由服务器端写入时就设置好的，localStorage是写入就一直存在，除非手动清除，sessionStorage是由页面关闭时自动清除
●cookie存储空间大小约4kb， sessionStorage及localStorage空间比较大，大约5M
●3者的数据共享都遵循同源原则，sessionStorage还限制必须是同一个页面
●cookie一般存储登录验证信息或者token，localStorage常用于存储不易变动的数据，减轻服务器压力，sessionStorage可以用来监测用户是否是刷新进入页面，如音乐播放器恢复进度条功能

12、原型和原型链
原型：每个函数都有 prototype 属性，该属性指向原型对象；原型可以放一些属性和方法，共享给实例对象使用。
原型链：当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，这样一层层往上找就形成了一个链式结构，称为原型链。最顶层找不到则返回 null

13、bind、call、apply 区别
1.call和apply会立即调用函数，bind 不会立即调用函数
2.call和apply传参不一样，call传递参数为单个的形式 而apply必须是数组形式
3.三者的第一个参数都是this的新指向

14、作用域与作用域链
作用域：规定了如何查找变量，确定所执行代码对变量的访问权限。
作用域链：从当前作用域开始一层层往上找某个变量，如果找到全局作用域还没找到，就放弃寻找 。这种层级关系就是作用域链。

15、数组去重
new Set()
indexOf
includes
新建一个数组，遍历原数组并判断新数组是否含有遍历值，如果没有，则push进去

15、for in和for of的区别？
循环数组情况下，都可以循环数组，for in输出的是数组的下标索引，而for of输出的是数组的每一项的值
循环对象情况下，forin可以循环遍历对象，for of不能遍历对象
总体来说，for in适合遍历对象，for of适合遍历数组

四、ES6

5、let、const、var的区别
● 变量提升：
var存在变量提升，即变量可以在声明之前调用，值为undefined
let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。
● 暂时性死区
在使用let、const命令声明变量之前，该变量都是不可用的。
var声明的变量不存在暂时性死区。
● 块级作用域
var不存在块级作用域
let和const存在块级作用域
● 重复声明
var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的变量。
const和let不允许重复声明变量
● 初始值设置
var和let可以不用设置初始值
const必须声明一个只读的常量。一旦声明，常量的值就不能改变

6、防抖和节流
● 防抖
指事件触发后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了，则会重新计算函数执行时间。（项目常用场景：搜索框）
● 节流
多次触发事件但在n秒内只执行一次（项目常用场景：提交表单）

7、对闭包的理解
● 闭包是指有权访问另一个函数作用域中变量的函数
在项目中的应用：回调函数，自调用函数封装的私有方法，防抖和节流
● 特点
1.可以避免使用全局变量，防止全局变量污染
2.变量会常驻在内存中，不会被垃圾回收
3.可以让外部访问函数内部变量
缺点：闭包使用不当可能造成内存泄露（有一块内存空间被长期占用，而不被释放）

9、Promise是什么?
Promise 是异步编程的一种解决方案，解决了地狱回调的问题
特点：promise有三种状态，pending，resolve，reject，初始状态为pending，一旦改变为别的状态就无法更改

10、forEach和map有什么区别
forEach()方法会针对每一个元素执行提供的函数，对数据的操作会改变原数组，该方法没有返回值；
map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值；

11、浅拷贝与深拷贝
浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址。所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
Object.assign()
函数库lodash的_.clone方法
展开运算符…

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。
JSON.parse(JSON.stringify())
函数库lodash的_.cloneDeep方法

12、es6新特性
let和const
模板字符串
扩展运算符…
箭头函数
解构赋值
includes()，map()，filter()，forEach()，Array.from()等方法

五、Vue

1、双向数据绑定的原理
Vue2：Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
缺陷:无法对新添加或删除的属性进行监听、无法监听数组的变化。

Vue3：通过使用 Proxy 对对象进行代理，从而实现数据劫持。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的语法。

2、说一下Vue的生命周期
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等一系列过程，称这是Vue的生命周期。

● beforeCreate（创建前）：此时data和methods中的数据都还没有初始化
● created（创建后） ：此时的data和methods已经创建完成，但是渲染的节点还未挂载到 DOM
● beforeMount（挂载前）：完成模板的编译，但是还没有挂载到页面上
● mounted（挂载后）：挂载完毕，vue实例初始化完毕，可以操作dom。可以进行ajax交互。
● beforeUpdate（更新前）：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
● updated（更新后） ：虚拟dom重新渲染完并应用更新，源码中执行了updata()；
● beforeDestroy（销毁前）：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。
● destroyed（销毁后）：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数。

3、v-if和v-show的区别
v-if是动态的向DOM树内添加或者删除DOM元素:v-show是通过设置DOM元素的display样式属性控制显隐
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论初始条件是否为真，都被编译；
v-if适合运行条件很少改变的；v-show适合频繁切换。

5、Computed 和 Watch 的区别
computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
watch 侦听器 : 更多的是观察的作用，支持异步，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景：
当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。
当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

6、Vuex是什么
Vuex是集中管理项目公共数据的。
（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
主要包括以下几个模块：
● state 存储公共管理的数据。
● getters 类似vue的计算属性，主要用来过滤一些数据。
● mutations 唯一修改数据的方法，且是同步的
● action 用于提交mutation，不直接变更状态。可以包含任意异步操作
● module当应用变得非常复杂时，可以将store分割成模块

7、Vue常用的修饰符
一、表单修饰符
.lazy：光标离开才会赋值
.trim：去除前后空格
.number：转换为数字

二、事件修饰符
.stop：阻止事件冒泡
.prevent：阻止默认事件，如表单form的提交
.once：事件只能触发一次
.self：e.target是自身是才会触发，即触发事件和绑定事件是同一元素
.capture：事件捕获

8、Route和router的区别
route:是路由信息对象，包括“path,parms,hash,name“等路由信息参数。
Router:是路由实例对象，包括了路由跳转方法，钩子函数等。

9、HashRouter 和 HistoryRouter的区别和原理
1.hash的路由地址上有#号，history模式没有
2.在做回车刷新的时候，hash模式会加载对应页面，history会报错404
3.hash模式支持低版本浏览器，history不支持，因为是H5新增的API
4.hash不会重新加载页面，单页面应用必备
5.history有历史记录，H5新增了pushstate和replaceState()去修改历史记录，并不会立刻发送请求，history需要后台配置

10、vue 的 keep-alive？
作用: 缓存组件，提升性能，避免重复加载一些不需要经常变动且内容较多的组件。
场景:列表跳转详情页面，列表页缓存应该被缓存而不是重新加载，提高用户的体验
keep-alive有以下三个属性：
include 字符串或正则表达式，只有名称匹配的组件会被匹配；
exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存；
max 数字，最多可以缓存多少组件实例。

11、对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

12、 Vue 中 $nextTick 作用与原理
Vue 在更新 DOM 时是异步执行的，在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以修改完数据，立即在方法中获取DOM，获取的仍然是未修改的DOM。
$nextTick的作用是：该方法中的代码会在当前渲染完成后执行，就解决了异步渲染获取不到更新后DOM的问题了。
$nextTick的原理：$nextTick本质是返回一个Promise
加分回答 应用场景：在钩子函数created()里面想要获取操作Dom，把操作DOM的方法放在$nextTick中

13、组件通信
1、props | $emit （父组件通过 props 向子组件传递据，子组件通过 $emit和组件通信）2、eventBus事件总线($emit / $on)
3、ref | $parent | $children （用于父子组件通信）
4、provide | inject （依赖注入）用于隔代组件通信

14、v-model 是如何实现的，语法糖实际是什么
（1）作用在表单元素上 动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message设置为目标值
（2）作用在组件上 在自定义组件中，v-model 默认会利用名为 value 的 prop和名为 input 的事件
本质是一个父子组件通信的语法糖，通过prop和$.emit实现。

15、mvc和mvvc
mvc
MVC包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。
View 传送指令到 Controller Controller 完成业务逻辑后，要求 Model 改变状态 Model 将新的数据发送到 View，用户得到反馈

mvvc
MVVM 分为 Model、View、ViewModel：

Model代表数据模型，数据和业务逻辑都在Model层中定义；
View代表UI视图，负责数据的展示；
ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。
这种模式实现了 Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM。
16、v-if和v-for为什么不能在同一级使用？谁的优先级更高？
在vue2中，v-for的优先级高于v-if,把它们放在同一个标签上时，页面每次渲染的时候都会重复的进行判断是十分消耗性能的

在vue3中，又恰好相反v-if的优先级是高于v-for的，同样vue3也不能把它们两者写在一起，正因为v-if优先于v-for,并且v-if又依赖v-for的数据源，在这个情况下将会出现报错的情况。

17、Vue单向数据流
数据是单项流动,数据可以从父组件流向子组件,父组件的数据发生变化,会自动同步子组件,反之不允许

18、vue父子组件首次加载触发哪些生命周期以及执行顺序？
1、父和子组件都会触发自己的beforeCreate，created，beforeMount，mounted
2、父 beforeCreate ==> 父 created ==> 父 beforeMount ==> 子 beforeCreate ==> 子 created ==> 子 beforeMount ==> 子 mounted ==> 父 mounted

19、vue的data为什么不是一个对象？
防止多个组件实例对象之间公用一个data，造成数据污染，所以采用函数形式，则回返回全新的data对象，
这样各个组件的数据互不干扰。

20、vue组件中的name的作用？
1、递归组件，组件想要使用自己时，可以通过自己的名字name使用自己。
2、不想keep-alive状态下组件的缓存功能，使用exclude="name"调用。
3、在浏览器使用vue-tools调试工具时，显示的组件名称是由vue组件的name决定的

21、vue2和vue3区别？
API
Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置，导致代码可读性变差
Vue3 组合式API（Composition API），同一逻辑的内容写到一起，增强代码的可读性、内聚性

底层响应式
Vue2底层是通过Object.defineProperty()进行数据劫持，无法实现响应式的数组更新。需要借助this.$set
Vue3底层是通过Porxy代理，将数据转化为响应式，能更好的支持动态添加和删除属性。

生命周期
vue3是在vue2大部分生命周期钩子名称上 + “on”，功能都差不多

根节点
Vue3 支持多根节点组件
…

22、vue3中watch和watcheffect的区别
watch需要指明监视的属性；watchEffect不需要指定属性，它会自动追踪函数内的依赖数据
watch有惰性，数值再次改变后执行监听函数；watchEffect立即执行，没有惰性
watch可以获取原值；watchEffect拿不到原数值

六、其他
1、跨域是什么？如何解决跨域问题
受浏览器同源策源，当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。

跨域解决方案
cors：目前最常用的一种解决办法，通过设置后端允许跨域实现
JSONP：利用的原理是script标签不受同源策略影响
webpack 代理：通过 webpack 中的 proxy 进行代理，从而解决跨域的问题。
node中间件、nginx反向代理
postmessage：H5新增API，通过发送和接收API实现跨域通信。