2024年1月3日

一 H5和css3新特性

HTML5的新特性包括：

1. 语义化标签：HTML5引入了一些新的语义化标签，例如

   、

   、

   、

   等，使得网页结构更加清晰和易于理解。

2. 表单增强：HTML5提供了一些新的表单元素和属性，例如、、等，使得表单的输入和验证更加方便和灵活。

3. 多媒体支持：HTML5引入了和标签，使得在网页中嵌入视频和音频变得更加简单和直观。

4. 画布（Canvas）：HTML5的元素允许通过JavaScript在网页上绘制图形、动画和游戏等交互效果。

CSS3的一些新特性包括：

1. 选择器：CSS3引入了一些新的选择器，例如属性选择器、伪类选择器、伪元素选择器等，使得选择元素的方式更加灵活和强大。

2. 盒模型：CSS3引入了box-sizing属性，可以更好地控制元素的盒模型，包括边框、内边距和内容的计算方式。

3. 过渡和动画：CSS3提供了transition和animation属性，可以实现元素的平滑过渡和动画效果，而无需使用JavaScript。

4. 弹性布局（Flexbox）：CSS3的Flexbox布局模型使得网页布局更加灵活和响应式，可以轻松实现各种复杂的布局结构。

5. 渐变和阴影：CSS3引入了渐变（gradient）和阴影（box-shadow、text-shadow）等效果，使得网页的视觉效果更加丰富和吸引人。

二 flex布局

1. 网页布局：Flex布局可以用于创建响应式的网页布局，使得网页在不同屏幕尺寸下都能自适应地展示。通过设置Flex容器和子元素的属性，可以轻松实现水平居中、垂直居中、等高布局、自适应列数等各种复杂的布局结构。

2. 导航菜单：Flex布局可以用于创建水平或垂直的导航菜单，使得菜单项能够自动调整宽度或高度，并保持对齐方式的一致性。通过设置Flex容器和子元素的属性，可以实现菜单项的自动换行、自动填充剩余空间等效果。

3. 列表布局：Flex布局可以用于创建列表布局，使得列表项能够自动调整宽度或高度，并保持对齐方式的一致性。通过设置Flex容器和子元素的属性，可以实现列表项的自动换行、自动填充剩余空间等效果。

4. 表单布局：Flex布局可以用于创建表单布局，使得表单元素能够自动调整宽度或高度，并保持对齐方式的一致性。通过设置Flex容器和子元素的属性，可以实现表单元素的自动换行、自动填充剩余空间等效果。

5. 图片展示：Flex布局可以用于创建图片展示布局，使得图片能够自动调整大小，并保持对齐方式的一致性。通过设置Flex容器和子元素的属性，可以实现图片的自动换行、自动填充剩余空间等效果。

三 浮动布局常见的问题

1. 父元素高度塌陷：当子元素都设置了浮动后，父元素的高度会塌陷，导致父元素无法撑开，从而影响布局。解决这个问题可以使用清除浮动的技术，例如在父元素的末尾添加一个空的块级元素，并设置clear: both样式，或者使用伪元素清除浮动。

2. 元素重叠：当多个浮动元素在同一行上时，如果宽度超过了父元素的宽度，可能会导致元素重叠的问题。解决这个问题可以通过设置合适的宽度、使用clear属性清除浮动或者使用Flex布局来替代浮动布局。

3. 布局顺序混乱：浮动元素脱离了正常的文档流，可能导致布局顺序混乱，特别是在移动设备上。解决这个问题可以使用CSS3中的Flex布局或者Grid布局，它们提供了更灵活和可控的布局方式。

4. 清除浮动带来的额外样式：为了清除浮动，常常需要添加额外的样式或元素，这增加了代码的复杂性和维护成本。可以考虑使用其他布局技术，如Flex布局或Grid布局，它们不需要额外的清除浮动的操作。

5. 兼容性问题：浮动布局在一些旧版本的浏览器中可能存在兼容性问题，特别是在IE6和IE7等浏览器中。为了解决这个问题，可以使用CSS Hack或者使用其他布局技术来替代浮动布局。

四 BFC的理解

BFC是块级格式化上下文,是用于布局块级盒子的独立渲染区域，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局 不会影响盒子外面的元素。

简单来说就是 BFC 就是 css 的一个布局概念，是一个独立的区域(容器)

满足下列条件之一就可以触发 BFC:

• HTML 根元素

• position 为 absolute 或 fixed

• float 属性不为 none（常用）

• overflow 不为 visible（常用）

• display 为 inline-block， table-cell， table-caption， flex

可以解决问题:margin 重叠,清除浮动,自适应布局.

五 css动画的理解

CSS动画是一种使用CSS属性来创建动态效果的方法。通过使用CSS动画，您可以创建各种效果，例如旋转、缩放、淡入淡出和移动等。

以下是一些使用CSS动画的步骤：

1. 使用@keyframes规则定义动画。这个规则描述了动画的开始、过程和结束状态。

css@keyframes example {
 0% { opacity: 0; }
 25% { width: 50%; }
 50% { opacity: 1; }
 100% { height: 200px; }
}

1. 将动画应用于元素。您可以使用animation属性来指定动画的名称、持续时间和方向。

css元素选择器 {
 animation: example 3s forwards;
}

除了animation属性外，还有一些其他的属性可用于控制动画的行为，例如animation-delay、animation-duration、animation-iteration-count和animation-direction等。

CSS动画可以用于各种场景，例如加载指示器、菜单效果和滚动动画等。

六 canvas和svg的区别

1. 数据格式：Canvas使用像素坐标系统，通过在画布上绘制像素点来创建图像，而SVG使用矢量坐标系统，通过描述形状和路径来创建图像。

2. 渲染方式：Canvas在加载页面时会绘制图像，而且不会随着页面的缩放而改变清晰度，但是可能会因为缩放而出现锯齿。SVG图像在加载时不会绘制，它是基于文本的，所以可以被搜索引擎索引，也可以被修改和操作。

3. 动画效果：Canvas适合处理较复杂的动画效果，因为它允许您操作像素，可以更灵活地控制动画帧。SVG适合处理较简单的动画效果，因为它是基于路径的，可以更容易地创建路径动画。

4. 支持性：Canvas在所有现代浏览器中都得到支持，但在一些旧版本的浏览器中可能不受支持。SVG在所有现代浏览器和大多数移动设备中都得到支持。

七 let、const和var声明变量的区别

var、let、const三者区别可以围绕下面五点展开：

• 变量提升

• 暂时性死区

• 块级作用域

• 重复声明

• 修改声明的变量

• 使用

变量提升

var `声明的变量存在变量提升，即变量可以在声明之前调用，值为`undefined,let / const 不存在变量提升是不完全正确的，只能说由于暂时性死区的存在使得我们无法直观感受到变量提升的效果。
​
let 和 const 定义的变量都会被提升，但是不会被初始化，不能被引用，不会像var定义的变量那样，初始值为undefined。
​
当进入let变量的作用域时，会立即给它创建存储空间，但是不会对它进行初始化。
​

暂时性死区

var不存在暂时性死区

let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

// var
console.log(a)  // undefined 
var a = 10 
// let
console.log(b)  // Cannot access 'b' before initialization 
let b = 10
// const 
console.log(c)  // Cannot access 'c' before initialization
const c = 10

块级作用域

var不存在块级作用域

let和const存在块级作用域

// var 
{    var a = 20 } 
console.log(a)  // 20 
// let 
{    let b = 20 }
console.log(b)  // Uncaught ReferenceError: b is not defined 
// const
{    const c = 20 } 
console.log(c)  // Uncaught ReferenceError: c is not defined

重复声明

var允许重复声明变量

let和const在同一作用域不允许重复声明变量

// var 
var a = 10
var a = 20 // 20 
// let
let b = 10 
let b = 20 // Identifier 'b' has already been declared 
// const
const c = 10 
const c = 20 // Identifier 'c' has already been declared

修改声明的变量

var和let可以

const声明一个只读的常量。一旦声明，常量的值就不能改变

// var
var a = 10 
a = 20
console.log(a)  // 20
//let 
let b = 10
b = 20 
console.log(b)  // 20
// const
const c = 10 
c = 20 
console.log(c) // Uncaught TypeError: Assignment to constant variable

使用

能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var

八 js有几种数据类型

7种：Undefined、Null、Boolean、Number、String、Symbol、Object、新增（Bigint）

九 箭头函数和普通函数的区别

1. 语法简洁：箭头函数的语法比普通函数更简洁。当函数体只有一条语句且函数名不需要使用时，可以使用箭头函数来替代普通函数。

2. 没有自己的this：箭头函数没有自己的this，this的值由上下文确定。而普通函数的this绑定具有灵活性，它的值随着函数的调用方式而变化。

3. 不能用作构造函数：箭头函数不能用作构造函数，即无法使用new关键字调用。而普通函数可以使用new关键字调用。

4. 没有arguments对象：箭头函数中没有自己的arguments对象，可以使用...rest参数或剩余参数来代替。而普通函数中可以使用arguments对象。

5. 不能使用yield关键字：箭头函数不能使用yield关键字，因此无法用作生成器函数。而普通函数可以使用yield关键字，用作生成器函数。

十 闭包

闭包是指一个函数能够访问并操作其外部函数作用域中的变量，即使在其外部函数已经返回之后。闭包是由函数和函数能访问的变量组成的。当一个函数返回另一个函数时，内部函数能够访问外部函数的变量，即使外部函数已经执行完毕并从内存中删除，这些变量仍然能够被内部函数访问，形成闭包。

闭包能够实现变量的私有化，可以将变量封装在函数内部，避免全局变量的污染。闭包还可以实现数据的缓存，通过在外部函数中声明变量，并在内部函数中引用这些变量，可以避免重复计算，提高性能。

javascriptfunction outerFunction() {
var count = 0;
​
function innerFunction() {
count++;
console.log(count);
}
​
return innerFunction;
}
​
var func = outerFunction();
func(); // 输出1
func(); // 输出2
func(); // 输出3

十一 防抖和节流

防抖：单位时间内，频繁触发事件，只执行最后一次 节流：单位时间内，频繁触发事件，只执行一次。

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

相同点：

• 都可以通过使用 setTimeout 实现

• 目的都是，降低回调执行频率，节省计算资源

不同点：

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现

• 函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能

• 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

防抖在连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求

• 手机号、邮箱验证输入检测

• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听

• 搜索框，搜索联想功能

十二 性能优化

1.编码优化 不要把所有数据都放在data中 v-for时给每个元素绑定事件用事件代理 keep-alive缓存组件 尽可能拆分组件，提高复用性、维护性 key值要保证唯一 合理使用路由懒加载，异步组件 数据持久化存储的使用尽量用防抖、节流优化 2.加载优化 按需加载 内容懒加载 图片懒加载 3.用户体验 骨架屏 4.SEO优化 预渲染 服务端渲染ssr 5.打包优化 CDN形式加载第三方模块 多线程打包 抽离公共文件 6.缓存和压缩 客户端缓存、服务端缓存 服务端Gzip压缩

十三 vue中异步组件的原理

1. 在组件选项中使用一个异步函数来返回异步组件，该函数会在组件初始化时被调用。

2. 在异步函数中使用动态导入来动态加载组件，加载完成后返回加载的组件。

3. Vue在初始化时会调用异步函数并等待异步函数返回结果。

4. 如果异步函数返回一个Promise对象，则Vue会等待Promise对象resolve后返回的组件进行渲染。

5. 如果异程函数返回一个加载中的组件，则Vue会将该组件挂起，等待异步加载完成后进行渲染。

一般都安装插件 vueuse

npm i @vueuse/core

十四 vue的生命周期

###

vue2	vue3
beforeCreate	setup() 开始创建组件之前，创建的是data和method
created	setup()
beforeMount	onBeforeMount 组件挂载到节点上之前执行的函数。
mounted	onMounted 组件挂载完成后执行的函数
beforeUpdate	onBeforeUpdate 组件更新之前执行的函数。
updated	onUpdated 组件更新完成之后执行的函数。
beforeDestroy	onBeforeUnmount 组件挂载到节点上之前执行的函数。
destroyed	onUnmounted 组件卸载之前执行的函数。

activated     | keep-alive 缓存的组件激活时        |
deactivated   | keep-alive 缓存的组件停用时调用    |

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

1. 父的beforeCreate → 父的created → 父的beforeMount →

2. 子的beforeCreate → 子的created → 子的beforeMount → mounted →

3. 父的mounted

十六 组件通信

• 父子组件之间的通信

• 兄弟组件之间的通信

• 祖孙与后代组件之间的通信

• 非关系组件间之间的通信

1. 通过 props 传递 //父传子

2. 通过 $emit 触发自定义事件 //子传父

3. 使用 ref //子传父

4. EventBus //兄弟组件传值

5. $parent 或$root //兄弟组件传值(共同祖辈)

6. attrs 与 listeners

7. Provide 与 Inject //祖先传递数据给子孙

8. Vuex //状态管理工具

十七 v-modle

v-model的本质上来说,是一个语法糖 目前咱们习惯性的写法是这样的:

但是实质上的完整写法:

也可以将@input后面写成一个函数,然后在methods中进行赋值操作。

v-model 的本质是将元素的 v-bind 和 v-on 指令进行了简写，它会在元素上绑定一个值（v-bind），并监听这个值的变化（v-on）。

例如，使用 v-model 指令绑定一个 input 元素的值和一个数据属性 value：

这相当于以下代码：