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

avatar
作者
猴君
阅读量:0

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:

      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

  1. 理解:Vue3.0中一个新的配置项,值为一个函数。

  2. setup是所有Composition API(组合API)“ 表演的舞台 ”

  3. 组件中所用到的:数据、方法等等,均要配置在setup中。

  4. setup函数的两种返回值:

    1. 若返回一个对象,则对象中的属性、方法, 在模板中均可以直

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!