0


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、生命周期钩子函数不同

vue2:vue2中的生命周期:

beforeCreate 组件创建之前

created 组件创建之后

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

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

beforeUpdate 组件更新之前

updated 组件更新之后

vue3:vue3中的生命周期:

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 函数的返回值。

也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 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;
————————————————
版权声明:本文为CSDN博主「田江」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jiang7701037/article/details/127954966


本文转载自: https://blog.csdn.net/weixin_72648222/article/details/127976421
版权归原作者 LiLi_yok 所有, 如有侵权,请联系我们删除。

“vue3面试题”的评论:

还没有评论