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 | MDN

new 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

理解：Vue3.0中一个新的配置项，值为一个函数。

setup是所有Composition API（组合API）“ 表演的舞台 ”。

组件中所用到的：数据、方法等等，均要配置在setup中。

setup函数的两种返回值：

若返回一个对象，则对