• vue3的面试题


    vue3的考试题

    一、vue2和vue3的区别(这个题录入系统时,只写标题就行)

    答案:

    1、双向数据绑定原理不同

    vue2:vue2的双向数据绑定是利用ES5的一个API:Object.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。

    vue3:vue3中使用了ES6的Proxy API对数据代理。相比vue2.x,使用proxy的优势如下:

    • defineProperty只能监听某个属性,不能对全对象监听

    • 可以省去for in,闭包等内容来提升效率(直接绑定整个对象即可)

    • 可以监听数组,不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

    2、是否支持碎片

    vue2:vue2不支持碎片。

    vue3:vue3支持碎片(Fragments),就是说可以拥有多个根节点。

    3、API类型不同

    vue2:vue2使用选项类型api,选项型api在代码里分割了不同的属性:data,computed,methods等。

    vue3:vue3使用组合式api,新的合成型api能让我们使用方法来分割,相比于旧的api使用属性来分组,这样代码会更加简便和整洁。

    4、定义数据变量和方法不同

    vue2:vue2是把数据放入data中,在vue2中定义数据变量是data(){},创建的方法要在methods:{}中。

    vue3:,vue3就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据:

    • 从vue引入reactive

    • 使用reactive() 方法来声明数据为响应性数据;

    • 使用setup()方法来返回我们的响应性数据,从而template可以获取这些响应性数据。

    5、生命周期钩子函数不同

    vue2vue2中的生命周期

    • beforeCreate 组件创建之前

    • created 组件创建之后

    • beforeMount 组价挂载到页面之前执行

    • mounted 组件挂载到页面之后执行

    • beforeUpdate 组件更新之前

    • updated 组件更新之后

    vue3vue3中的生命周期

    • setup 开始创建组件前

    • onBeforeMount 组价挂载到页面之前执行

    • onMounted 组件挂载到页面之后执行

    • onBeforeUpdate 组件更新之前

    • onUpdated 组件更新之后

    而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外,vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

    6、父子传参不同

    vue2:父传子,用props,子传父用事件 Emitting Events。在vue2中,会调用this$emit然后传入事件名和对象。

    vue3:父传子,用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

    7、指令与插槽不同

    vue2:vue2中使用slot可以直接使用slot;v-for与v-if在vue2中优先级高的是v-for指令,而且不建议一起使用。

    vue3:vue3中必须使用v-slot的形式;vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句,不会相互冲突;vue3中移除keyCode作为v-on的修饰符,当然也不支持config.keyCodes;vue3中移除v-on.native修饰符;vue3中移除过滤器filter

    8、main.js文件不同

    vue2:vue2中我们可以使用pototype(原型)的形式去进行操作,引入的是构造函数

    vue3:vue3中需要使用结构的形式进行操作,引入的是工厂函数;vue3中app组件中可以没有根标签

    关键词:

    组合式api;proxy;支持碎片;组合式api;composition;生命周期;

    二、vue3新增的响应式相关的函数

    答案:

    ref,reactive,readonly,computed,watch,watchEffect

    关键词:

    ref,reactive,readonly,computed,watch,watchEffect

    三、ref的理解:

    答案:

    1)、功能:接受一个内部值,返回一个响应式的、可更改的 ref 对象,ref对象只有一个属性:value

    2)、使用ref对象:模板上不需要写 .value 属性(会自动解构),在js中,使用 .value 来完成数据的读写。

    3)、ref接收基本类型和引用类型

    • ref可以接收基本类型。

    • ref也可以接收引用类型:如果将一个对象传给 ref函数,那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

    关键词:

    value,响应式,

    四、reactive的理解:

    答案:

    1)、功能: 接受一个对象,返回一个对象的响应式代理(proxy)。返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹,因此不等于源对象,建议只使用响应式代理,避免使用原始对象。

    响应式转换是“深层”的:它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性,同时保持响应性。

    2)、注意点:当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时,不会执行 ref 的解包。

    关键词:

    对象、proxy、深层、数组、Map

    五、readonly

    答案:

    1)、功能:接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理。

    2)、只读代理是深层的:对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同,但解包得到的值是只读的。

    关键词:

    只读

    六、computed

    答案:

    功能:computed是计算属性。和选项式api中的计算属性实现的功能一样。

    参数:

    • 可以接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。

    • 也可以接受一个带有 getset 函数的对象来创建一个可写的 ref 对象。

    关键词:

    七、watch

    答案:

    功能:侦听数据的变化,和选项式api中的watch实现的功能一样,组合式api中watch功能更加强大,灵活。默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。

    参数:

    • 第一个参数:侦听器的,可以是以下几种:

      • 一个函数(返回一个值的函数)

      • 一个 ref

      • 一个响应式对象

      • ...或是由以上类型的值组成的数组

    • 第二个参数:在(第一个参数的值)发生变化时要调用的回调函数。这个回调函数接受三个参数:新值、旧值,以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如:等待中的异步请求。

    当侦听多个来源时,回调函数接受两个数组,分别对应来源数组中的新值和旧值。

    • 第三个参数:可选的, 是一个对象,支持以下这些选项:

      • immediate:在侦听器创建时立即触发回调。第一次调用时旧值是 undefined

      • deep:如果源是对象,强制深度遍历,以便在深层级变更时触发回调。参考深层侦听器

    关键词:

    侦听,监听,副作用,immediate,deep,深度遍历,懒侦听

    八、watchEffect

    答案:

    • 功能: watchEffect也是监听数据,但是它会立即运行一个函数,而不是懒侦听。watchEffect的侦听(依赖)的数据:watchEffect里使用了哪个数据,哪个数据就是watchEffect的依赖。

    • 参数:

      • 第一个参数:要运行的副作用函数。这个副作用函数的参数也是一个函数,注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如:等待中的异步请求。(和watch的第二个参数中回调函数的第三参数一样)。

      • 第二个参数:可选的选项,可以用来调整副作用的刷新时机或调试副作用的依赖。因为,侦听默认是在vue组件更新前调用,如果你希望组件更新后调用,可以把第二个参数传入:{ flush: 'post' }

    • 返回值:用来停止该副作用的函数。

    关键词:

    侦听,监听,副作用,依赖,不是懒侦听

    九、watch和watchEffect的区别

    答案:

    watchEffect() 相比,watch() 使我们可以:

    • 懒执行副作用:watch是懒侦听执行的;watchEffect是首次就会执行

    • 触发侦听器的来源:watch是明确知道由哪个依赖引起的侦听,watchEffect不明确

    • 可以访问所侦听状态的前一个值和当前值:watch可以,watchEffect不可以。

    关键词:

    懒侦听、当前值、前一个值,新值,旧值

    十、setup函数的参数

    答案:

    props:接收组件的属性,

    context:上下文对象,包括 slots,attrs,emit,expose

    关键词:

    slots,attrs,emits,expose

    十一、setup语法糖写法如何获取setup函数的参数:

    答案:

    setup函数的参数 setup语法糖

    props : defineProps

    context.emit : defineEmits

    context.expose: defineExpose

    context.slots: useSlots

    context.attrs: useAttrs

    关键词:

    defineProps;defineEmits;defineExpose;useSlots;useAttrs;

    十二、vue3和vue2生命周期的变化,以及compositionApi中的生命周期钩子函数

    答案:

    1、Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:

    beforeDestroy改名为 beforeUnmount

    destroyed改名为 unmounted

    2、Vue3.0也提供了 Composition API 形式的生命周期钩子,Option API形式的钩子对应关系如下:

    beforeCreate===>setup()

    created=======>setup()

    beforeMount ===>onBeforeMount

    mounted=======>onMounted

    beforeUpdate===>onBeforeUpdate

    updated =======>onUpdated

    beforeUnmount ==>onBeforeUnmount

    unmounted =====>onUnmounted

    关键词:

    beforeUnmount;unmounted;onBeforeMount;onMounted;onBeforeUpdate;onUpdated;onBeforeUnmount;onUnmounted

    十三、Vue3.X和vue2.X中的响应式原理分别是什么,区别是什么?

    答案:

    1、vue2.x的响应式

    实现原理:

    • 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

    • 数组类型:通过重写更新数组的一系列方法(如:push,pop等)来实现拦截。(对数组的变更方法进行了包裹)。

    存在问题:

    • 新增属性、删除属性, 界面不会更新。

    • 直接通过下标修改数组, 界面不会自动更新。

    2、Vue3.0的响应式

    实现原理:

    • 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。

    • 通过Reflect(反射): 对源对象的属性进行操作。

    十四、vue3响应式数据的判断

    答案:

    isRef: 检查一个值是否为一个 ref 对象

    isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

    isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

    isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

    关键词:

    isRef;isReactive;isReadonly;isProxy;

    十五、reactive与ref的区别:

    答案:

    • 定义数据角度:

      • ref用来定义:基本类型数据。

      • reactive用来定义:对象(或数组)类型数据。

      • 备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象。

    • 原理角度:

      • ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。

      • reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。

    • 使用角度:

      • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value。

      • reactive定义的数据:操作数据与读取数据:均不需要.value。

    关键词:

    ref;reactive;Proxy;value;

  • 相关阅读:
    复杂环境下多移动机器人路径规划研究(Matlab代码实现)
    斐讯N1装宝塔做服务器-完美环境版nginx+apache
    【学习】如何高效地进行集成测试
    【开源】基于Vue.js的校园二手交易系统的设计和实现
    从字节码的角度理解i++、++i和i++ + ++i
    阿里Java面试题剖析:如何保证缓存与数据库的双写一致性?
    注册D8读卡器COM组件
    回溯法(复习笔记一)
    vue使用elementUI的upload上传文件封装
    案例拆解丨逆势增长,瑞幸是怎么打好私域这张牌的?
  • 原文地址:https://blog.csdn.net/jiang7701037/article/details/127954966