Vue3面试题汇总

1.Vue3响应式原理是什么?Vue2响应式原理是什么?

Vue2响应式原理:

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

数组类型:通过重写更新数组的一系列方法实现拦截(对数组的变更方法进行了包裹)

存在问题:

        新增属性,删除属性,界面不会更新;

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

追问:Vue2如何解决这些问题-------通过$set

Vue3响应式原理:

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

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

2.ref和reactive的区别是什么?

1)定义数据类型:简单来说,ref通常用来定义基本类型数据,reactive用来定义对象(或者是数

组)类型数据;但是ref也可以用来定义对象(或者是数组)类型数据,它内部会自动通过reactive

转为代理对象;

2)使用方面:ref操作数据需要.value取值,templage模板中不需要;reactive都不需要.value取值

3)数据传递方面:结构赋值会使reactive丢失响应式,而{ref(1), ref(2)}不会

4)原理角度:ref通过Object.defineProperty()的get与set来实现响应式(数据劫持);而reactive

3.Vue3中composition API与Vue2中option API有什么区别?

Option API:

        包含一个描述组件选项(data,methods, props等)的对象options;

        API开发复杂组件,同一个功能逻辑的代码被拆分到不同选项;

        使用mixin重用公用代码可能会发生命名冲突,数据来源不清晰问题;

Compotions API:

        Vue3新增的一组API,他是基于函数的API,可以更灵活的组织组件的逻辑;

        解决了Options API在大型项目中不好拆分和重用的问题;

4.Vue3中组合式函数和Vue2中Mixin的区别?

相同点:

        都可单独提取可复用的逻辑到单独的js文件,以供不同的组件使用

不同点:

1)不清晰的数据来源:当使用了多个Mixin时,实例上的数据属性来自那个Mixin变得不清晰

2)命名空间冲突:多个来自不同作者的mixin可能会注册相同的属性名,造成命名冲突,若使用组

合式函数,你可以通过在结构变量时对变量进行重命名来避免形同的键名

3)隐式的跨mixin交流:多个mixin需要依赖共享的属性名进行相互作用,这使得他们隐性地耦合

在一起;而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入,像普通函数那样

猜你喜欢

转载自blog.csdn.net/xiaojian044/article/details/130477664