1.MVVM
MVVM（Model-View-ViewModel）是一种前端开发架构模式。它将应用程序分为三个主要部分：
MVVM 的主要优点有：
1.Vue 响应式原理
Vue 的响应式原理主要通过以下几个步骤实现：
Object.defineProperty()方法对数据对象的属性进行劫持，当数据被访问或修改时，可以触发相应的操作。通过这种方式，Vue 实现了数据和视图的自动同步，当数据变化时，视图会自动更新，无需手动操作 DOM。
2.Vue 数据双向绑定
Vue 的数据双向绑定是指在表单元素（如输入框、复选框等）和数据之间建立自动同步的机制。当表单元素的值发生变化时，数据也会相应地更新；反之，当数据发生变化时，表单元素的值也会更新。
Vue 实现数据双向绑定主要通过以下方式：
v-model指令：在表单元素上使用v-model指令，Vue 会自动将表单元素的值与数据进行绑定。当表单元素的值发生变化时，数据会自动更新；当数据发生变化时，表单元素的值也会更新。3.Vue 状态更新后如何渲染页面的
当 Vue 的状态更新时，Vue 会通过以下步骤渲染页面：
4、vue 和 react 的 diff 算法区别是什么
Vue 的 diff 算法
React 的 diff 算法
5、react 的 fiber 机制
React 的 Fiber 机制是一种对 React 核心算法的重新实现，旨在提高 React 应用的性能和响应性。
6、vue-router 的 api 有哪些，使用的场景是什么
Vue Router 的 API
router.push()：导航到指定的路由，可以传递参数。router.replace()：导航到指定的路由，替换当前历史记录。router.go()：在历史记录中向前或向后导航。router.back()：后退一步。router.forward()：前进一步。$route：当前激活的路由信息对象，包含路由的路径、参数、查询参数等。$router：路由器实例，可以访问路由的各种方法和属性。使用场景
1.CDN
CDN（Content Delivery Network）即内容分发网络。它是一组分布在不同地理位置的服务器，用于存储和分发静态内容，如图片、脚本、样式表等。
CDN 的主要作用有：
2. 如果离用户最近的缓存服务器没有想要的资源，会怎么样
如果离用户最近的缓存服务器没有所需的资源，通常会发生以下情况：
3、DNS 解析过程
DNS 服务器查询
：如果以上缓存中都没有找到对应的 IP 地址，浏览器会向本地 DNS 服务器发送查询请求。本地 DNS 服务器通常由互联网服务提供商（ISP）提供。
4、说一说 https，加密方式，数字证书包含哪些信息
https
加密方式
数字证书包含的信息
1. 基本数据类型
在前端开发中，常见的基本数据类型主要有以下几种：
number类型来表示数值。可以进行算术运算，如加、减、乘、除等。true和false。通常用于条件判断。null和undefined。null表示一个空对象指针，undefined表示未初始化的变量或没有返回值的函数的结果。基本数据类型通常存储在栈内存中，占用空间较小，赋值操作是值的复制。
2. 为什么对象存堆中
对象存储在堆中主要有以下原因：
3. 数组和对象区别
在 CSS 中，选择器是用来指定要应用样式的 HTML 元素的工具。不同的选择器有着不同的作用和用法，下面就来详细介绍一下~、>、+、[]、:和::这些选择器。
一、>选择器（子选择器）
>选择器用于选择指定元素的直接子元素。
div > p {
color: blue;
}在这个例子中，只有作为<div>直接子元素的<p>元素的文本颜色会被设置为蓝色。这意味着如果<p>元素被嵌套在其他元素中，而不是直接在<div>元素下，那么这个样式将不会被应用。
二、+选择器（相邻兄弟选择器）
+选择器用于选择紧接在指定元素后的第一个兄弟元素。
h1 + p {
font-size: 18px;
}在这个例子中，紧接在<h1>元素后面的第一个<p>元素的字体大小会被设置为 18 像素。如果有多个<p>元素紧接在<h1>元素后面，只有第一个<p>元素会受到影响。
三、~选择器（通用兄弟选择器）
~选择器用于选择指定元素之后的所有兄弟元素。
h2 ~ p {
color: green;
}在这个例子中，<h2>元素后面的所有<p>元素的文本颜色都会被设置为绿色。
四、[]选择器（属性选择器）
[]选择器根据元素的属性来选择元素。
input[type="text"] {
border: 1px solid gray;
}在这个例子中，所有type属性为text的<input>元素会有一个 1 像素宽的灰色边框。
还可以使用其他属性选择器的语法，如：
[attribute^="value"]：选择属性值以指定值开头的元素。[attribute$="value"]：选择属性值以指定值结尾的元素。[attribute*="value"]：选择属性值包含指定值的元素。五、:伪类选择器
伪类选择器用于选择处于特定状态的元素。
例如：
:hover：选择鼠标悬停在其上的元素。:active：选择被激活（如被点击）的元素。:visited：选择被访问过的链接。:first-child：选择父元素的第一个子元素。:last-child：选择父元素的最后一个子元素。:nth-child(n)：选择父元素的第 n 个子元素。六、::伪元素选择器
伪元素选择器用于选择元素的特定部分。
例如：
::before：在元素内容的前面插入内容。::after：在元素内容的后面插入内容。::first-letter：选择元素内容的第一个字母。::first-line：选择元素内容的第一行。用选择器实现二级分栏
<div class="container">
<div class="first-level">一级栏目 1</div>
<div class="second-level">
<div>二级栏目 1.1</div>
<div>二级栏目 1.2</div>
</div>
<div class="first-level">一级栏目 2</div>
<div class="second-level">
<div>二级栏目 2.1</div>
<div>二级栏目 2.2</div>
</div>
</div>这里使用div元素创建了一个包含一级栏目和二级栏目的容器。每个一级栏目后面紧跟着对应的二级栏目。
.container {
display: flex;
flex-wrap: wrap;
}
.first-level {
width: 200px;
background-color: #f0f0f0;
padding: 10px;
}
.second-level {
display: none;
width: 200px;
background-color: #e0e0e0;
padding: 10px;
}
.first-level:hover +.second-level {
display: block;
}通过 CSS 设置容器为弹性布局，一级栏目和二级栏目分别设置宽度和背景颜色。当鼠标悬停在一级栏目上时，显示对应的二级栏目。
继续阅读->