vue3面试题:2023 最新前端 Vue 3.0 面试题及答案(持续更新中……)
1、 Vue2 的 Vue3 区别?
1、响应式系统的重新配置,使用代理替换对象.define属性,使用代理优势: 可直接监控阵列类型的数据变化 监听的目标是对象本身,不需要像Object.defineProperty那样遍历每个属性,有一定的性能提升 可拦截应用、拥有密钥、有等13种方法,以及Object.define属性没有办法 直接添加对象属性/删除 新增组合API,更好的逻辑重用和代码组织 模板编译时间优化,将一些静态节点编译成常量 slot优化,采取槽编译成懒人功能,拿槽渲染的决定留给子组件 代码结构调整,更方便树摇动,使其更小
2、Vue3带来了什么改变?
1.性能的提升,打包大小减少41%,初次渲染快55%, 更新渲染快133%,内存减少54% 2.使用Proxy代替defineProperty实现响应式,重写虚拟DOM的实现和Tree-Shaking 3.拥抱TypeScript 4.新的特性 Composition API(组合API) setup配置 ref与reactive watch与watchEffect provide与inject 5.新的内置组件 Fragment Teleport Suspense
3、vue2和vue3的生命周期对比?
1. Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: 2. beforeDestroy改名为 beforeUnmount 3. destroyed改名为 unmounted 4. Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下: 5. beforeCreate===>setup() 6. created=======>setup() 7. beforeMount ===>onBeforeMount 8. mounted=======>onMounted 9. beforeUpdate===>onBeforeUpdate 10. updated =======>onUpdated 11. beforeUnmount ==>onBeforeUnmount 12. unmounted =====>onUnmounted
4、Vue3.0响应式原理是?vue2响应式原理?
vue2.x的响应式 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。 存在问题: 新增属性、删除属性, 界面不会更新。 直接通过下标修改数组, 界面不会自动更新。 Vue3.0的响应式 实现原理: 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。 通过Reflect(反射): 对源对象的属性进行操作。
5、vue3响应式数据的判断?
isRef: 检查一个值是否为一个 ref 对象 isReactive: 检查一个对象是否是由 reactive 创建的响应式代理 isReadonly: 检查一个对象是否是由 readonly 创建的只读代理 isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
6、vue3的常用 Composition API有哪些?
1. setup 2. ref函数 3. reactive函数 4. computed函数 5. watch函数 6. watchEffect函数 7. toRef 8. shallowReactive 与 shallowRef 9. readonly 与 shallowReadonly 10. readonly: 让一个响应式数据变为只读的(深只读)。 11. shallowReadonly:让一个响应式数据变为只读的(浅只读)。 12. toRaw 与 markRaw 13. customRef 14. provide 与 inject