2023-06-23 前端面试题
1. 自我介绍一下
2. 什么是 css 重绘和回流
重绘： 简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。
回流： 当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。
3. html5 新增了哪些常用的标签
html
语义化标签：
1、<article>：代表文档、页面、应用或网站中的独立的、自包含的内容。
<aside>：用于表示与其周围内容只轻微相关的内容，并且可以独立于其周围的内容。
<details>：用于表示用户可以请求附加信息的内容。
<figcaption>：表示图形元素的标题。
<figure>：用于标记一些流内容，常常与 <figcaption> 元素一起使用。
<footer>：表示其直接的祖先或根节元素的页脚。
<header>：表示介绍性内容或导航链接组。
<main>：代表文档主体的内容，它应是直接相关的，或扩展了文档中心主题或应用的功能性。
<mark>：表示应用于引起读者关注的文本的部分。
<nav>：代表页面导航链接的部分。
<section>：代表文档中的独立部分，没有更具体的语义元素来表示它的时候，可以使用这个元素。
<summary>：代表 <details> 元素的内容摘要，标题或图例。
<time>：代表文本中的日期和时间。
多媒体和嵌入元素：
<audio>：用于在文档中嵌入音频内容。
<video>：用于在文档中嵌入视频内容。
<source>：用于定义媒体元素 (<video> 和 <audio>) 的媒体资源。
<track>：用于在视频中指定字幕。
画布和 SVG
<canvas>：用于通过 JavaScript 在页面上动态绘制图形。
<svg>：定义可伸缩矢量图形的图形容器。
表单和输入元素：
<datalist>：指定 <input> 元素的预定义选项列表。
<keygen>：提供一种验证用户的方式，即通过客户端生成密钥对。
<output>：表示表单的输出。
<input> 标签在 HTML5 中也得到了增强，增加了更多类型的输入，包括color, date, datetime-local, month, week, time, email, number, range, search, tel, url等。
交互元素：
<dialog>：定义对话框或其他交互窗口，如模态内容。
<menuitem>：用于创建用户可以点击的菜单项。
<meter>：定义标量测量范围或分数值的度量标准。
<progress>：定义任何类型的任务的进度。4. css 选择器的优先级从高到底
1、重要性（!important）：在所有上述规则之上，如果声明了 !important，这个声明的优先级最高。但应避免过度使用 !important，因为这将破坏样式表的自然级联规则，并可能造成维护问题。
2、内联样式（Inline Styles）：例如 <div style="color: red;">。内联样式的优先级最高。
3、ID选择器：例如 #example。ID选择器的优先级次于内联样式。
4、类选择器（Class Selectors）、属性选择器（Attribute Selectors）和伪类（Pseudo-classes）：例如 .example，[type="text"]，:hover。这些选择器的优先级次于 ID 选择器。
5、元素（Type Selectors）和伪元素（Pseudo-elements）：例如 div，::before。这些选择器的优先级最低。
6、通配符选择器（Universal Selector）、关系选择器（Combinators）和否定伪类（:not()）：例如 *，+，>,~，:not()。这些选择器不影响优先级计算。
7、继承：某些 CSS 属性值可以从父元素继承，但继承的样式优先级低于任何一种类型的选择器。
8、源次序：如果优先级相同，后出现的规则会覆盖先出现的规则。1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel=“external”]）
9.伪类选择器（a:hover, li:nth-child）5. Vue2 中深度选择器使用过吗？
html
<style scoped>
.a /deep/ .b { /* 样式将应用到 .a 内部的所有 .b */ }
.a >>> .b { /* 样式将应用到 .a 内部的所有 .b */ }
.a::v-deep .b { /* 样式将应用到 .a 内部的所有 .b */ }
</style>
在 Vue.js 中，如果你给样式添加了 scoped 属性，那么这些样式只会应用到当前组件的元素，而不会影响到其他组件。这是一种很有用的特性，可以防止样式的全局污染。然而，有时你可能希望某些样式能够影响到子组件，而不仅仅是当前组件。这就是深度选择器的用途。6. Vue2 中 data 为什么是函数
https://v2.cn.vuejs.org/v2/api/#data
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
7. Vue2 双向数据绑定的原理是什么
https://v2.cn.vuejs.org/v2/guide/reactivity.html#如何追踪变化 1、数据劫持（Data hijacking）：Vue.js 使用了一个叫做 Object.defineProperty 的函数，可以用来监听属性变动。该函数能够让我们给对象的属性添加 getter 和 setter，这样当我们访问或者修改这些属性时，我们可以知道这些行为并进行相应操作。这就是所谓的数据劫持，Vue.js 通过它来监听组件状态的变化。
2、发布订阅模式（Publisher-Subscriber pattern）：数据劫持能让我们知道一个属性的变化，但是我们还需要知道是谁改变了它，这样才能完成一个完整的双向数据绑定。这就需要用到发布订阅模式。在 Vue.js 中，每一个组件实例都有一个对应的 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖，之后当依赖项的 setter 触发时，会通知 watcher，从而使得它关联的组件重新渲染。