vue的面试题目（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；
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！