前端面试题扩展

1、webpack和vite的区别

1）原理不同

webpack是一个静态模块打包器，可以将js、html和css打包成一份或多份优化的资源。webpack提供了固定的API和生态，用户可以通过插件和loader来扩展webpack的功能。

vite是由vue的作者尤大开发的构建工具，他利用ES Module Imports，在开发环境下可以实现按需编译，加快了开发速度。而在生产环境下，它使用 Rollup 进行打包，提供更好的tree-shaking、压缩代码和性能优化

2）编译方式不同

webpack在编译过程中，会将所有模块打包成一个 bundle.js 文件，然后再运行这个文件

vite在开发模式下没有打包的步骤，会启动服务，将资源通过服务进行托管

3）开发效率不同

webpack热更新是全量更新，即使修改一个小文件，也会重新编译整个应用，在大型项目中可能会导致编译速度缓慢

vite热更新是增量更新，只更新修改的文件 所以即使在大型应用中也能保持极快的编译速度

4）扩展性不同

webpack有着成熟的插件生态，几乎可以实现任何功能，扩展性非常强
vite虽然也支持插件，但跟webpack相比，还是有些距离

-------- | --------
（扩展）：loader 和 plugin 区别
loader扩展了webpack，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。loader是运行在NodeJS中，仅仅只是为了打包。

plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务
-------- | --------

使用场景

webpack由于拥有丰富的功能和扩展性，因此适用于大型、复杂的项目
vite凭借轻量和速递、更适合中小型项目的开发

2、router3x和router4x区别

1）创建方式不同

3x版本中 使用 new Router() 创建路由实例
4x版本中 使用 createRouter() 创建路由实例

2）路由模式不同

3x版本中 路由模式为mode：对应的模式是hash or history
4x版本中 路由模式为history：对应的模式是 createWebHashHistory or createWebHistory

3）挂载方式不同

3x版本中 以属性的方式挂载到vue实例上

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

4x版本中 由于vue3的 composition api，vue-router的挂载方式以插件来挂载

import router from './router'
app.use(router)

4）路由重定向不同

3x中 使用 redirect 选项进行跳转

4x中移除了这个选项，在子路由中添加一个空路径路由来匹配跳转地址

 children: [
   { path: '', redirect: 'dashboard' }, // 这里写跳转
 ]

5）页面中使用不同

因为setup中不能访问this,因此提供两个api来获取 router 和 route ， useRouter() 和 useRoute()

3、v-model的实现、如何用到子组件中 .sync和v-model区别

v-model 主要用于数据的双向绑定 view层修改会影响data data中数据发生改变会触发view层更新

原理：v-bind：value 绑定响应式数据 在父组件中绑定 注册input事件并传递数据 在子组件中触发

区别：

都是语法糖，都可以实现父子组件中的数据的双向通信。

1. sync可以在一个组件中使用多次 v-model只能使用一次
2. 在父组件中书写格式不同 v-model=“num”, :num.sync=“num”
3. 绑定事件不同 v-model 绑定input事件 .sync绑定update事件