前端八股文汇总

📝 主旨内容

1、门户网站怎么确认技术选型，如何优化SEO

对于门户网站，最重要的就是：搜索引擎的优化（SEO）、不同设备兼容性、网站性能以及用户体验，可以通过以上几点作为切入点进行门户网站技术选型依据。

1. **技术选型：**在技术选型初期应选择有利于SEO优化的开源框架，如：Next.js…，为后期做网站搜索引擎优化，提升网站排名铺垫基础。
2. **搜索引擎优化：**创建高质量、原创且有价值的内容，确保与目标关键词相关；多使用h1、h2、以及p标签等语义化标签，以提高内容的可读性和搜索引擎理解；确保网站在不同尺寸的屏幕上有足够好的显示效果，同时应兼容移动端，适配更主流的搜索引擎；优化图片、压缩文件、使用浏览器缓存等方法来提高网站加载速度。
3. **网站更新维护：**定期更新网站内容，确保信息的时效性；同时，定期检查和维护网站的技术方面，以防止漏洞和问题的积累。

2、Vue与React的区别

**Vue.js**和 **React.js** 都是流行的前端 JavaScript 框架，用于构建用户界面；但由于框架设计方式不同，差异化的存在，导致双方也各有利弊。

1. 双向数据绑定 vs 单向数据流：
   • Vue通过双向数据绑定，当数据变化时，视图会自动更新，而视图的变化也会反馈到数据上。这通过v-model指令来实现。
   • React采用单向数据流，数据的流动是自上而下的，通过props从父组件传递到子组件。为了实现组件间的通信，React使用了回调函数或Redux等状态管理工具。
2. 组件化：
   • Vue提供了更直观的组件化系统，通过Vue文件可以包含模板、脚本和样式。父子组件之间的通信相对简单，也支持自定义事件。
   • React组件化同样强大，但更注重组件的纯粹性和函数式编程风格。父子组件通信需要通过props和回调函数，而状态管理工具可用于更复杂的应用。
3. 模板语法和JSX：
   • Vue使用基于HTML的模板语法，直接在模板中使用Js表达式。这使得模板相对更易读，更容易上手。
   • React使用JSX，一种Js的语法扩展，它在Js中嵌套HTML。这提供了更灵活的表达方式，但可能对初学者有一定的学习曲线。

3、Vue2和Vue3的差异，以及双向绑定原理的变化

Vue 3相对于Vue 2，引入了性能优化、Composition API、模板编译改进、Teleport组件等新特性，提高了开发体验和整体性能。

1. **性能优化：**Vue 3通过更好的响应性系统和虚拟DOM的优化实现了更高的性能。它引入了更细粒度的依赖追踪和静态提升等机制，使得更新和渲染更为高效。
2. **Composition API：**Composition API是Vue 3引入的一项重大变化。它允许开发者通过函数组织逻辑，而不再依赖于选项对象。这使得代码更容易组织、重用和维护，特别是在处理复杂逻辑的情况下。
3. **模板编译：**Vue 3的模板编译器生成更紧凑的代码，这有助于减小应用的体积，并提高运行时性能。新的编译器还支持一些新特性，如片段（fragments）和动态模板内容。
4. **全局API的变化：在Vue 3中，全局的Vue对象被移除，一些全局API变成了createApp的实例方法。例如，全局的mixin现在需要通过app.mixin**来调用。
5. **TS支持：**Vue 3对TypeScript的支持更加完善。它通过重写了大部分代码以提供更好的类型推断，使得使用TypeScript时更容易发现和解决错误。
6. **Teleport组件：**Vue 3引入了Teleport组件，使得在DOM中的不同位置渲染组件更为方便。这在处理全局弹窗、模态框等场景时非常有用。
7. **更好的递归组件：**在Vue 3中，递归组件的性能得到了显著改进，使得处理大规模数据渲染时更为高效。
8. **新的API：Vue 3引入了一些新的API，如ref和reactive用于响应式数据，toRefs用于解构响应式对象，watchEffect**用于创建副作用等，这些API使得开发更为灵活和便捷。
9. 双向绑定原理：
   • Vue 2使用**Object