vue3 面试题

vue2 和vue3 区别

1.源码组织方式变化：使用 TS
2.支持 compositionAPI，基于函数的 api，更灵活组织组件逻辑(Vue2 使用 options api)
3.响应式系统提升：Vue3 的响应式数据原理改成了 Proxy，可以监听动态新增删除属性，以及数组变化
4.编译优化：Vue 通过标记静态根节点来优化 Diff，Vue 则标记和提升所有静态根节点，Diff 的时候只需要去对比动态节点的内容
5.打包体积优化：移除了一些不常用的 api(inline-template,filter)
6.生命周期的变化，使用 setup 替代了 beforeCreate 和 created
7.template 支持多个根标签
8.Vuex 状态管理，创建实例的方式，Vue2 使用 new store；Vue3 使用 createStore;
9.Route 获取页面实例以及路由信息，Vue2 使用 this 的方式获取；而 Vue3 采用 getCurrentInstance/userRoute,userRouter 的方式来获取
10.对 props 的使用：Vue2 通过 this 的方式使用；Vue3 则直接通过 props 使用；

Vue 3带来了哪些新的更新和改进?

Composition API: 提供了更灵活和可组合的代码组织方式。

响应式系统的改进: 使用 ref 和 reactive 代替Vue 2中的 data 和 computed.
更好的性能: Vue 3在虚拟DOM渲染上进行了优化，提供了更快的渲染速度。
新的组件声明方式: 使用 defineComponent 代替Vue 2中的 Vue.extend 。
改进了TypeScript支持: 提供了更好的类型推导和类型检查

什么是Vue3？ Vue3有哪些新增特性？

Vue3是Vue.js框架的最新版本，它增加了很多新特性，包括Composition API、Teleport、Suspense 和Fragment等。

vue3 如何实现插槽？

Vue3中使用 来实现插槽。在父组件中使用 来填充插槽。

vue3新的生命周期钩子

Vue3中新增了两个生命周期钩子函数：

beforeUnmount：在组件卸载之前调用，可以用来做一些清理工作，比如取消订阅、清除定时器等。

onRenderTracked：在组件渲染时调用，可以用来监视组件的状态变化，比如打印组件的状态、记录组件的变化等。

除此之外，Vue3还对原有的生命周期钩子函数进行了优化和改进，比如：

beforeCreate和created合并为setup函数，使得组件的初始化更加简洁和灵活。

beforeMount和mounted合并为onMounted函数，使得组件的挂载更加高效和可控。

beforeUpdate和updated合并为onUpdated函数，使得组件的更新更加精准和可靠。

beforeDestroy和destroyed合并为onUnmounted函数，使得组件的卸载更加安全和可靠。

执行最终顺序：

Vue3生命周期：setup

Vue2生命周期：beforeCreate

Vue2生命周期：created

Vue3生命周期：onBeforeMount

Vue2生命周期：beForeMount

Vue3生命周期：onMounted

Vue2生命周期：mounted

Vue3生命周期：onBeforeUpdate

Vue2生命周期：beforeUpdate

Vue3生命周期：onUpdated

Vue2生命周期：updated

Vue3生命周期：onBeforeUnmount

Vue2生命周期：beforeUnmount

Vue3生命周期：onUnmounted

Vue2生命周期：unmounted