本文主要是介绍Vue3高频面试题1,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1、vue2和vue3的区别是什么
Composition API
vsOptions API
*- Composition API:组合式API
- Options API:选项式API——在vue2中使用
- 它们两者在
vue3
中是组织代码
的不同方式
Vue3
引入了Composition API
,更灵活、易于组织代码,相较于Vue2
的Options API
更具优势。
性能优化
- Vue3在虚拟DOM和响应式系统方面进行了多项性能优化,提升了页面加载速度和渲染效率。
- 使用了更高效的算法减少了不必要的dom更新
- 使用了proxy对属性的变化进行监听,并在需要进行页面更新的时候批量的进行操作
TypeScript支持
- 简称TS——它其实就是一种静态类型的检查工具,方便在开发的时候就发现问题
- Vue3更好地支持TypeScript,提供更好的类型检查和推断,有助于减少潜在错误。
新增功能
- Vue3引入了Teleport、Suspense等新功能,简化了处理复杂逻辑和异步操作的方式。
- 方便的把组件中的一些dom模板移动到dom树中的任何内容、任何位置
树型组件优化
- Vue3优化了树型组件的性能,特别是对于大型列表的渲染,表现更为出色。
全局API调整
- Vue3对全局API进行了调整和统一,使整个框架更加一致和易于理解。
包大小优化
- Vue3的包大小相较于Vue2有所减小,剔除了一些冗余代码,提升了整体性能。
Tree-shaking效果
- Vue3采用ES模块组织代码,优化了Tree-shaking的效果,减少了不必要的代码被打包到生产环境。
- Tree-shaking:打包编译时把一些不必要的代码自动剔除掉
更佳的响应式原理
- Vue3重新设计了响应式系统,使变化侦测更加精确高效,提供更出色的性能表现。
逻辑复用与共享 - Composition API让逻辑复用和共享更加便捷灵活,让代码组织更加清晰和高效。
- Vue3重新设计了响应式系统,使变化侦测更加精确高效,提供更出色的性能表现。
注意
:- 以上不是所有的区别内容
- 但是,面试回答已经足够用了,也是主要的区别
2、介绍setup—包含参数、返回值
概念
- setup是vue3中的CompositionAPI(组合式API)的启动器
- 它会在beforecreate 与created之间去自执行
- setup有2个形参
- setup有2种返回值
两个形参
- props:props就是接收父组件传递过来的属性
- context:有三个属性
- attrs:attrs获取当前标签上面的所有属性的对象,但不能和props属性连用,如果连用了,那么会返回什么都没有——即:props属性接收的数据,attrs不可以重复接收
- emit:emit自定义事件
- slots:插槽,带有dom的属性(用来接收父组件传递的html内容)
两种返回值
- 对象:
- 对象:就是要把定义在setup中的属性与方法必须返回出去 要不然模板不能使用
- 返回渲染函数:
- 渲染函数:返回渲染函数的优先级比写在模板中的内容优先级高,所以写了渲染函数会覆盖原有的模板内容
- 如果要返回渲染函数,还要配合vue中提供的h函数或者是createVNode函数,其中createVNode()函数的功能比h()函数要多且做了性能优化,渲染节点的速度也更快。
- 对象:
3、计算属性和函数方法的区别
- 最大的区别是:
缓存
和惰性
这个概念 函数
:调用多少次,就是打印多少次- 所以在性能上来说,
函数
更加浪费性能,计算属性
更加节省性能,而且处理速度更快,因为它只执行一次(不改变依赖数据的情况下),函数则执行多次 - 相比于
函数
,计算属性
具有自动缓存
和依赖追踪
的优势,更适合进行派生计算
4、watchEffect 与 watch 的区别
- 不需要手动传入依赖,它对整个组件中所有的数据自动的来完成监听
- 每次初始化时会执行一次回调函数来自动获取依赖
- 无法获取到原值,只能得到变化后的值,只有
newVal
,没有oldVal
watch
是惰性的,因此仅当依赖项更改时才会触发,也就是说:watch
在初始化的时候不会执行,当监听的响应式数据改变了,watch
才会执行watchEffect
在创建组件后立即运行,然后跟踪依赖关系。
5、vue3中没有过滤器了,如果想实现相同的功能怎么办
- 编写一个
函数
,参数
为:需要格式化(处理/过滤)的数据 return处理好的数据
,如:年月日只展示年份,就用截取功能
6、父组件如何触发子组件中的方法
- 通过
ref
配合defineExpose
即可实现 子组件
中通过defineExpose
暴露方法,在父组件中使用ref
来接收- 再通过
xxx.value.方法名()
即可调用
7、组件传值的实现——从父子及兄弟角度出发
父子组件传值
:- 使用
Props
:父组件通过 Props 向子组件传递数据,子组件通过 defineProps 接收数据。 - 使用
Provide
/Inject
:祖先组件通过 provide 提供数据,后代组件通过 inject 注入数据。这会导致组件之间的耦合性增加,应谨慎使用。
- 使用
子父组件传值
:- 使用
Events
:子组件通过 emit 方法触发自定义事件向父组件传递数据,父组件通过在子组件上使用@eventName
监听事件来接收数据。
- 使用
兄弟组件传值
:- 使用事件总线
(Event Bus)
:创建一个空的Vue实例
作为事件总线
兄弟组件
通过事件总线
来通信。
- 使用事件总线
8、生命周期的钩子函数
onBeforeMount
:在组件挂载之前调用,仅触发一次。onMounted
:组件挂载完成后调用,此时DOM已经生成,可以进行DOM操作。onBeforeUpdate
:在组件更新之前调用,此时数据已变化,但DOM未更新。onUpdated
:组件更新完成后调用,此时DOM已更新。onBeforeUnmount
:在组件卸载之前调用,可用于清理操作。onUnmounted
:组件卸载后调用,用于执行最后的清理操作。onErrorCaptured
:在捕获子组件树中的错误时调用,可用于全局错误处理。
9、vuex中的5个属性
State
:存储应用的全局状态,类似于组件中的data。Getters
:从State中派生出计算属性,类似于组件中的computed。Mutations
:同步更改State的方法,必须是同步操作。Actions
:用于提交Mutations,可以包含异步操作。Modules
:将State
、Getters
、Mutations
、Actions
分割成模块,便于管理大型应用。
这篇关于Vue3高频面试题1的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!