vue3面试题：2024 最新前端 Vue 3

​

1

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：- beforeDestroy改名为 beforeUnmount- destroyed改名为 unmounted
• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：- beforeCreate===>setup()- created=======>setup()- beforeMount ===>onBeforeMount- mounted=======>onMounted- beforeUpdate===>onBeforeUpdate- updated =======>onUpdated- beforeUnmount ==>onBeforeUnmount- unmounted =====>onUnmounted

4、Vue3.0中的响应式原理是什么？vue2的响应式原理是什么？

vue2.x的响应式

• 实现原理：- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。Object.defineProperty(data, 'count', { get () {}, set () {}})
• 存在问题：- 新增属性、删除属性, 界面不会更新。- 直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式

• 实现原理:- 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。- 通过Reflect（反射）: 对源对象的属性进行操作。- MDN文档中描述的Proxy与Reflect：- Proxy：Proxy - JavaScript | MDN- Reflect：Reflect - JavaScript | MDNnew Proxy(data, { // 拦截读取属性值 get (target, prop) { return Reflect.get(target, prop) }, // 拦截设置属性值或添加新属性 set (target, prop, value) { return Reflect.set(target, prop, value) }, // 拦截删除属性 deleteProperty (target, prop) { return Reflect.deleteProperty(target, prop) }})​proxy.name = 'tom'

5、vue3响应式数据的判断？

• isRef: 检查一个值是否为一个 ref 对象
• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

6、vue3的常用 Composition API有哪些？

官方文档: 介绍 | Vue.js

1.拉开序幕的setup

1. 理解：Vue3.0中一个新的配置项，值为一个函数。
2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
3. 组件中所用到的：数据、方法等等，均要配置在setup中。
4. setup函数的两种返回值：1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直