Vue3与Vue2对比及面试关键点解析

"本文涵盖了2023年Vue.js面试中的关键知识点，包括Vue 3与Vue 2的差异、CSS选择器及其优先级、BFC（块级格式化上下文）的概念及触发条件，以及跨域解决方案和HTTP2与HTTP1的区别。" Vue 3与Vue 2的区别： 1. **Diff算法的改进+TreeSharing优化**：Vue 3在更新虚拟DOM时采用了更高效的算法，减少了不必要的DOM操作，同时引入了TreeSharing，使得组件树的复用性更强，提高了性能。 2. **双向绑定使用ES6 Proxy**：Vue 2中使用`v-model`实现双向绑定，而在Vue 3中，它改为了使用ES6的Proxy对象，可以直接监听对象属性的变化，更加灵活和高效。 3. **原生支持TypeScript**：Vue 3原生支持TypeScript，提供了更好的类型检查和开发体验，提升了代码的可维护性。 4. **Composition API**：Vue 3引入了Composition API，允许开发者将逻辑组件化，提高代码的可重用性和组织性，降低了组件间的耦合度。 5. **移除`this`问题**：Vue 3中的setup函数不再需要`this`关键字来访问数据和方法，而是通过组合API直接使用，简化了代码结构。 CSS选择器及其优先级： CSS选择器的优先级由四个数字组成，依次代表!important、内联样式、ID选择器和类/属性/伪类选择器、元素选择器/伪元素选择器的权重。权重总和越高，选择器的优先级越高。 1. `!important`：具有最高优先级，无论其他权重如何，都会被应用。 2. 内联样式：权重1000，直接在元素上设置的style属性。 3. ID选择器：权重100，如`#example`。 4. 类、属性、伪类选择器：权重10，如`.example`、`[type="text"]`、`:hover`。 5. 元素选择器、伪元素选择器：权重1，如`div`、`::before`。 6. 关系选择器、通配符选择器：权重0，如`>`、`*`。 BFC（块级格式化上下文）： 1. BFC是一个独立的布局环境，其中的元素布局不受外部元素影响。 2. 触发BFC的条件包括根元素、浮动元素、绝对定位元素、内联块元素、表格单元格、表格标题、overflow不为visible的块元素、弹性盒以及display为flow-root或column-span: all的元素。 跨域解决方案： 1. **JSONP**：通过动态插入`<script>`标签，利用回调函数实现跨域数据请求。 2. **Nginx反向代理**：通过配置Nginx服务器，将前端请求转发至其他域名，从而解决跨域问题。 3. **postMessage**：在不同源的窗口间传递消息，实现跨域通信。 4. **document.domain**：如果主域相同，可以设置`document.domain`为相同的值，实现同源策略的跨子域。 5. **脚手架代理**：在开发环境下，前端构建工具如Vue CLI可以通过配置代理服务器绕过跨域限制。 HTTP2与HTTP1的区别： 1. **二进制分帧**：HTTP2使用二进制格式传输数据，相比HTTP1.x的文本格式更高效和健壮。 2. **多路复用**：HTTP2允许在一个TCP连接上并发处理多个请求，解决了HTTP1.x的阻塞问题，提高了页面加载速度。 3. **头部压缩**：HTTP2使用HPACK算法压缩请求和响应头，减少了网络传输的数据量。 4. **服务端推送**：HTTP2支持服务端主动推送资源给客户端，无需客户端发起请求，提前加载可能需要的内容。