【前端vue3面试题】2023最新面试实录vue3.0，高频10问(持续更新...)(前端vue面试题2020)

【前端vue3面试题】2023最新面试实录vue3.0，高频10问(持续更新...) 前端vue3面试题 2023最新面试实录vue3.0，高频10问(持续更新…)文章目录前端vue3面试题 2023最新面试实录vue3.0，高频10问(持续更新...)1问: vue3和vue2有哪些不同?2问: Vue3.0中的响应式原理是什么？vue2的响应式原理是什么？vue2.x的响应式原理vue3.0的响应式原理3问: 有哪些vue3响应性判断函数?4问: setup函数怎么用?5问: Composition API 和 React Hook 很像, 它们有什么区别?reack Hook的限制:Composition API 相比于 React Hook优点:6问: ref 和 reactive 区别?7问: watch 和 watchEffect8问: vue3的Composition API 相比于2的Options API, 有什么优势吗?9问: 什么是SSR(服务端渲染),原理是什么? 好处有哪些?10问: 还能想到Vue3其他不同于vue2的细节点吗?(考察宽度, 使用度)1问: vue3和vue2有哪些不同?响应式系统的重构，使用proxy替换Object.defineProperty属性，优势：Proxy可直接监听 对象添加/删除属性;Proxy直接监听 数组的变化Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升新增组合式API(Composition API)，更好的逻辑重用和代码组织:setup配置ref与reactivewatch与watchEffectprovide与inject重构虚拟 DOM, diff算法生命周期更名beforeDestroy改名为 beforeUnmountdestroyed改名为 unmounted// Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：beforeCreate ===> setup()created ===> setup()beforeMount ===> onBeforeMountmounted ===> onMountedbeforeUpdate ===> onBeforeUpdateupdated ===> onUpdatedbeforeUnmount===> onBeforeUnmountunmounted ===> onUnmounted新的内置组件FragmentTeleportSuspense移除的部分:移除v-on.keyCode修饰符，同时也不再支持config.keyCodes移除v-on.native修饰符,移除过滤器（filter）不再建议使用mixins, 组合式函数本身就是更好的mixin代替品2问: Vue3.0中的响应式原理是什么？vue2的响应式原理是什么？vue2.x的响应式原理对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。存在问题:新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。追问: vue2如何解决这些问题? 答: $setvue3.0的响应式原理通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、添加、删除等。通过Reflect（反射）: 对源对象的属性进行操作。new Proxy(data, { // 拦截读取属性值 get (target, prop) { return Reflect.get(target, prop) }, // 拦截设置属性值或添加新属性 set (target, prop, value) { return Reflect.set(target, prop, value) }, // 拦截删除属性 deleteProperty (target, prop) { return Reflect.deleteProperty(target, prop) }})proxy.name = 'tom' 存在问题: 解决了vue2响应式的短板, 但是也存在兼容性问题(新特性, 老浏览器不支持)3问: 有哪些vue3响应性判断函数?

推荐整理分享【前端vue3面试题】2023最新面试实录vue3.0，高频10问(持续更新...)(前端vue面试题2020)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端面试题vue2021,前端vue面试题,vue前端面试官常问的问题,vue前端面试官常问的问题,vue前端面试题目,前端vue面试题,2019最新vue前端经典面试题,前端vue面试题,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

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

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

4问: setup函数怎么用?setup使用: setup(props, context) { /*** Setup props */ // 请注意如果你解构了 props 对象，解构出的变量将会丢失响应性, 推荐使用props.title形式 console.log(props.title) // 将 `props` 转为一个其中全是 ref 的对象，然后解构 const { title } = toRefs(props) // `title` 是一个追踪着 `props.title` 的 ref console.log(title.value) // 或者，将 `props` 的单个属性转为一个 ref const title = toRef(props, 'title') /*** Setup 上下文 */ // 透传 Attributes（非响应式的对象，等价于 $attrs） console.log(context.attrs) // 插槽（非响应式的对象，等价于 $slots） console.log(context.slots) // 触发事件（函数，等价于 $emit） console.log(context.emit) // 暴露公共属性（函数） console.log(context.expose) }注意点, 当使用<script setup>语法糖时: 父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容5问: Composition API 和 React Hook 很像, 它们有什么区别?

是很像, Composition API 诞生之初就借鉴了React Hook, 同时避免了reack Hook的短板限制:(吹爆vue3好吗)

reack Hook的限制:不能在循环中、条件、调用嵌套函数 Hook你必须确保它总是在你这边 React Top level 调用函数 HookuseEffect、useMemo 依赖关系必须手动确定Composition API 相比于 React Hook优点:Compositon API 不必担心调用的顺序，它也可以在循环中、条件、在嵌套函数中使用React Hook 每次重新渲染时，都需要调用 Hook, 而vue3在setup函数中，一个组件实例只调用一次setup，性能相对react hook较高vue响应式系统自动实现依赖关系收集，而且组件的性能优化是由 Vue 内部完成的，而 React Hook 的依赖关系需要手动传递，并且依赖关系的顺序必须得到保证，让路 useEffect、useMemo 等等，否则组件性能会因为依赖关系不正确而下降。6问: ref 和 reactive 区别?简单来说, ref通常用来定义基本类型数据, reactive用来定义对象（或者数组）类型数据 注: ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。使用方面: ref 操作数据需要.value取值，template模板中不需要。 reactive都不需要.value取值数据传递方面: 解构赋值会使reactive丢失响应性, 而{ref(1), ref(2)}不会原理角度: ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。 reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。7问: watch 和 watchEffectwatch使用:// sum 可以是ref, reactive, 或者是一个getter函数, 或者以上组成的数组watch(sum,(newValue,oldValue)=>{ console.log('sum变化了',newValue,oldValue)},{immediate:true})注意点: 当watch监听的是reactive时强制开启深度监听(deep: true失效)oldValue无法正确获取, (oldValue===newValue)watchEffect使用:const stop = watchEffect(()=>{ const x1 = sum.value const x2 = person.age console.log('watchEffect配置的回调执行了')})// 如需要stop() 与watch不同点:watch需指明监听的属性watchEffect无需指明需要监听的属性,vue的响应性系统自动进行依赖收集, 只要所指定的回调中用到的数据发生变化，则直接重新执行回调8问: vue3的Composition API 相比于2的Options API, 有什么优势吗?Options API 存在的问题, 新增或者修改一个需求，就需要分别在data，methods，computed里修改 。而组合式API这种情况只需要在特定的代码块里新增修改, 代码组织结构更优雅组合式API 代码粒度更加细腻(相较于组件), use函数使得逻辑提取和重用的成本更低, 代码维护性更强开发者可以只需关注实际的业务逻辑, 而不是散落在各处(监视、计算、方法 Option)业务逻辑附属品9问: 什么是SSR(服务端渲染),原理是什么? 好处有哪些?ssr全称server side render, 前端页面的产生是由服务器端生成的，我们就称之为服务端渲染。对比客户端渲染?(client side render, CSR) CSR执行流程：浏览器加载html文件 -> 浏览器下载js文件 -> 浏览器运行vue代码 -> 渲染页面 SSR执行流程：浏览器加载html文件 -> 服务端装填好内容 -> 返回浏览器渲染使用SSR的好处?(何时该使用SSR?):对SEO有利：搜索引擎的爬虫爬取你的页面信息，因为大多数爬虫并不支持等待前端获取数据后再爬取数据的，而有了SSR以后，这些抓取工具就可以立刻得到完整的HTML结构化数据，从而被纳入搜索引擎。更短的白屏时间：服务端渲染并不需要加载和执行大量的js脚本, 直接渲染服务端给出的html字符串, 从而缩短首屏加载时间不好的地方: 前后端分工搭配复杂, 原本一个页面, 同时由前后端绘制填充服务端渲染 (SSR): vue3官方文档10问: 还能想到Vue3其他不同于vue2的细节点吗?(考察宽度, 使用度)Vue3.0中对这些API做出了调整：全局API的转移2.x 全局 API（Vue）3.x 实例 API (app)Vue.config.xxxxapp.config.xxxxVue.config.productionTip移除Vue.componentapp.componentVue.directiveapp.directiveVue.mixinapp.mixinVue.useapp.useVue.prototypeapp.config.globalProperties简化了slot插槽使用, vue2中作用域插槽: 必须两个属性: slot=‘slotName’ slot-scope=‘prop’; vue3则是#slotName='prop'vue实例的创建方法不同:/** vue2 **/import Vue from 'vue'...new Vue({ el: '#app', router, store, axios, render: h => h(App)})/** vue3 **/import { createApp } from 'vue'// 从一个单文件组件中导入根组件import App from './App.vue'const app = createApp(App)支持组件上使用 v-model, 实现双向绑定

等等…