vue3的面试题

vue3的考试题

一、vue2和vue3的区别（这个题录入系统时，只写标题就行）

答案：

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

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

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

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()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：

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

vue2：vue2中的生命周期：

vue3：vue3中的生命周期：

而且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接收基本类型和引用类型

关键词：

value，响应式，

四、reactive的理解：

答案：

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

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

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

关键词：

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

五、readonly

答案：

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

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

关键词：

只读

六、computed

答案：

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

参数：

关键词：

七、watch

答案：

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

参数：

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

关键词：

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

八、watchEffect

答案：

关键词：

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

九、watch和watchEffect的区别

答案：

与 watchEffect() 相比，watch() 使我们可以：

关键词：

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

十、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的响应式

实现原理：

存在问题：

2、Vue3.0的响应式

实现原理:

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

答案：

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

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

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

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

关键词：

isRef；isReactive；isReadonly；isProxy；

十五、reactive与ref的区别：

答案：

关键词：

ref；reactive；Proxy；value；

标签 , ,