分享几个常问的vue3面试题!

一、说一下Vue3的新特性?

1、新增组合API

常用的有setup、reactive、ref、toRefs

2、生命周期变化

创建:

beforeCreate和created被setup替代了

挂载:

onBeforeMount

onMounted

更新:

onBeforeUpdate

onUpdated

销毁:

onBeforeUnmount

onUnmounted

3、响应式原理变化

用Proxy代理配合Reflect反射代替了v2中的Object.defineProperty()实现数据的响应式

4、更好的支持TS

因为源码用TS写的

5、新增内置组件

Fragment(片段)、Teleport(瞬移)、Suspense(不确定)

6、新的脚手架工具vite

7、可以设置多个根节点

8、重写虚拟DOM的实现和Tree-Shaking,渲染速度更快、打包体积更小

9、移除了一些东西

移除v-on的键盘修饰符

移除过滤器filter

二、说一下reactive和ref的区别?

ref:

通过Object.defineProperty()给value的属性添加getter、setter来实现响应式

一般用来处理基本数据类型,也能处理复杂数据类型,只不过内部会自动将对象转换为reactive的代理对象

在js中要加.value,在模版中不需要

reactive:

通过Proxy对目标对象中的所有属性动态地进行数据劫持,并通过Reflect操作对象内部数据来实现响应式

一般用来处理复杂数据类型,会实现递归深度响应式

三、说一下Vue3的响应式原理?

vue3采用数据代理+数据劫持+发布订阅模式的方法。

在初始化vue实例时,通过Proxy进行数据代理,用Proxy对象来代理目标对象,

并且对目标对象中的所有属性动态地进行数据劫持,动态地指定一个getter、setter,并通过Reflect操作对象内部数据。

当Proxy对象属性或Proxy数组元素发生变化时,会触发Proxy属性的setter方法,然后通过Reflect操作目标对象属性,同时触发它Dep实例的notify方法进行依赖分发,通知所有依赖的Watcher实例执行内部回调函数。

最后会触发renderWatcher回调,会重新执行render函数,重新对比新旧虚拟DOM,重新渲染页面。

当读取Proxy对象属性时,会触发Proxy属性的getter方法,然后触发它Dep实例的depend方法进行依赖收集。

四、说一下组合式API写法对比选项式API写法的优点?

组合式API写法将组件的逻辑按照功能进行划分,将相关逻辑放在一起,使得代码更加清晰和易于维护

五、说一下常用的一些组合API及作用?

ref:定义一个基础数据类型的响应式数据

reactive:定义一个复杂数据类型的响应式数据

toRefs:把响应式数据对象中的所有属性变成ref对象,常用于解构响应式对象属性

computed:计算属性

watch:变化时监听

watchEffect:立即监听

相关推荐
火山口车神丶5 分钟前
如何借助AI进行模块封装DIY
javascript·人工智能·算法
angushine24 分钟前
Python常用方法
开发语言·前端·python
C澒27 分钟前
AI 生码 - D2C:Figma to Code 全流程实现
前端·低代码·ai编程·figma
敲代码的鱼哇28 分钟前
发送短信/拨打电话/获取联系人能力 UTS 插件(cz-sms)
android·前端·ios·uni-app·安卓·harmonyos·鸿蒙
搬搬砖得了31 分钟前
Vue 响应式对象异步赋值作为 Props:二次渲染问题与组件设计哲学
前端·vue.js
张西餐1 小时前
Promise的理解
前端
悟空瞎说1 小时前
收藏即复用!50个极致实用JavaScript单行代码,前端开发效率直接拉满
javascript
天渺工作室1 小时前
别再写改名脚本了,一个 Vite 插件搞定压缩、校验、自动哈希命名vite-plugin-pack-orchestrator
前端·vite
薯老板1 小时前
事件循环(Event Loop)
javascript
大龄程序员狗哥1 小时前
第30篇:使用Flask部署你的第一个AI模型——打造简易Web API(项目实战)
前端·人工智能·flask