Vue3高频面试题1

1、vue2和vue3的区别是什么

1. Composition API vs Options API*
   • Composition API：组合式API
   • Options API：选项式API------在vue2中使用
   • 它们两者在vue3中是组织代码的不同方式
   • Vue3引入了Composition API，更灵活、易于组织代码，相较于Vue2的Options API更具优势。
2. 性能优化
   • Vue3在虚拟DOM和响应式系统方面进行了多项性能优化，提升了页面加载速度和渲染效率。
   • 使用了更高效的算法减少了不必要的dom更新
   • 使用了proxy对属性的变化进行监听，并在需要进行页面更新的时候批量的进行操作
3. TypeScript支持
   • 简称TS------它其实就是一种静态类型的检查工具，方便在开发的时候就发现问题
   • Vue3更好地支持TypeScript，提供更好的类型检查和推断，有助于减少潜在错误。
4. 新增功能
   • Vue3引入了Teleport、Suspense等新功能，简化了处理复杂逻辑和异步操作的方式。
   • 方便的把组件中的一些dom模板移动到dom树中的任何内容、任何位置
5. 树型组件优化
   • Vue3优化了树型组件的性能，特别是对于大型列表的渲染，表现更为出色。
6. 全局API调整
   • Vue3对全局API进行了调整和统一，使整个框架更加一致和易于理解。
7. 包大小优化
   • Vue3的包大小相较于Vue2有所减小，剔除了一些冗余代码，提升了整体性能。
8. Tree-shaking效果
   • Vue3采用ES模块组织代码，优化了Tree-shaking的效果，减少了不必要的代码被打包到生产环境。
   • Tree-shaking：打包编译时把一些不必要的代码自动剔除掉
9. 更佳的响应式原理
   • Vue3重新设计了响应式系统，使变化侦测更加精确高效，提供更出色的性能表现。
     逻辑复用与共享
   • Composition API让逻辑复用和共享更加便捷灵活，让代码组织更加清晰和高效。
10. 注意：
    • 以上不是所有的区别内容
    • 但是，面试回答已经足够用了，也是主要的区别

2、介绍setup---包含参数、返回值

1. 概念
   • setup是vue3中的CompositionAPI(组合式API)的启动器
   • 它会在beforecreate 与created之间去自执行
   • setup有2个形参
   • setup有2种返回值
2. 两个形参
   • props：props就是接收父组件传递过来的属性
   • context：有三个属性
     • attrs：attrs获取当前标签上面的所有属性的对象，但不能和props属性连用，如果连用了，那么会返回什么都没有------即：props属性接收的数据，attrs不可以重复接收
     • emit：emit自定义事件
     • slots：插槽，带有dom的属性（用来接收父组件传递的html内容）
3. 两种返回值
   • 对象：
     • 对象：就是要把定义在setup中的属性与方法必须返回出去 要不然模板不能使用
   • 返回渲染函数：
     • 渲染函数：返回渲染函数的优先级比写在模板中的内容优先级高，所以写了渲染函数会覆盖原有的模板内容
     • 如果要返回渲染函数，还要配合vue中提供的h函数或者是createVNode函数，其中createVNode()函数的功能比h()函数要多且做了性能优化，渲染节点的速度也更快。

3、计算属性和函数方法的区别

1. 最大的区别是：缓存和惰性这个概念
2. 函数：调用多少次，就是打印多少次
3. 所以在性能上来说，函数更加浪费性能，计算属性更加节省性能，而且处理速度更快，因为它只执行一次(不改变依赖数据的情况下)，函数则执行多次
4. 相比于函数，计算属性具有自动缓存和依赖追踪的优势，更适合进行派生计算

4、watchEffect 与 watch 的区别

1. 不需要手动传入依赖，它对整个组件中所有的数据自动的来完成监听
2. 每次初始化时会执行一次回调函数来自动获取依赖
3. 无法获取到原值，只能得到变化后的值，只有newVal，没有oldVal
4. watch是惰性的，因此仅当依赖项更改时才会触发，也就是说：watch在初始化的时候不会执行，当监听的响应式数据改变了，watch才会执行
5. watchEffect在创建组件后立即运行，然后跟踪依赖关系。

5、vue3中没有过滤器了，如果想实现相同的功能怎么办

1. 编写一个函数，参数为：需要格式化(处理/过滤)的数据
2. return处理好的数据 ，如：年月日只展示年份，就用截取功能

6、父组件如何触发子组件中的方法

1. 通过ref配合defineExpose即可实现
2. 子组件中通过defineExpose暴露方法，在父组件中使用ref来接收
3. 再通过xxx.value.方法名()即可调用

7、组件传值的实现------从父子及兄弟角度出发

1. 父子组件传值：
   • 使用 Props：父组件通过 Props 向子组件传递数据，子组件通过 defineProps 接收数据。
   • 使用 Provide/Inject：祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。这会导致组件之间的耦合性增加，应谨慎使用。
2. 子父组件传值：
   • 使用Events：子组件通过 emit 方法触发自定义事件向父组件传递数据，父组件通过在子组件上使用 @eventName 监听事件来接收数据。
3. 兄弟组件传值：
   • 使用事件总线（Event Bus）：创建一个空的Vue实例作为事件总线
   • 兄弟组件通过事件总线来通信。

8、生命周期的钩子函数

1. onBeforeMount：在组件挂载之前调用，仅触发一次。
2. onMounted：组件挂载完成后调用，此时DOM已经生成，可以进行DOM操作。
3. onBeforeUpdate：在组件更新之前调用，此时数据已变化，但DOM未更新。
4. onUpdated：组件更新完成后调用，此时DOM已更新。
5. onBeforeUnmount：在组件卸载之前调用，可用于清理操作。
6. onUnmounted：组件卸载后调用，用于执行最后的清理操作。
7. onErrorCaptured：在捕获子组件树中的错误时调用，可用于全局错误处理。

9、vuex中的5个属性

1. State：存储应用的全局状态，类似于组件中的data。
2. Getters：从State中派生出计算属性，类似于组件中的computed。
3. Mutations：同步更改State的方法，必须是同步操作。
4. Actions：用于提交Mutations，可以包含异步操作。
5. Modules：将State、Getters、Mutations、Actions分割成模块，便于管理大型应用。