vue3常见面试题 2022最新版

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 方法创建的代理

VBNET 复制 全屏

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