【前端vue3面试题】2024最新面试实录vue3

set (target, prop, value) {
return Reflect.set(target, prop, value)
},
// 拦截删除属性
deleteProperty (target, prop) {
return Reflect.deleteProperty(target, prop)
}
})

proxy.name = ‘tom’

* 存在问题: 解决了vue2响应式的短板, 但是也存在兼容性问题(新特性, 老浏览器不支持)



> 
> ##### 3问: 有哪些vue3响应性判断函数?
> 
> 
> 


* 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 调用函数 Hook
* useEffect、useMemo 依赖关系必须手动确定


###### Composition API 相比于 React Hook优点:


* Compositon API 不必担心调用的顺序，它也可以在循环中、条件、在嵌套函数中使用
* React Hook 每次重新渲染时，都需要调用 Hook, 而vue3在setup函数中，一个组件实例只调用一次setup，性能相对react hook较高
* vue响应式系统自动实现依赖关系收集，而且组件的性能优化是由 Vue 内部完成的，而 React Hook 的依赖关系需要手动传递，并且依赖关系的顺序必须得到保证，让路 useEffect、useMemo 等等，否则组件性能会因为依赖关系不正确而下降。



> 
> ##### 6问: ref 和 reactive 区别?
> 
> 
> 


1. 简单来说, ref通常用来定义`基本类型`数据, reactive用来定义`对象（或者数组）`类型数据  
 注: ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
2. 使用方面: ref 操作数据`需要.value`取值，template模板中不需要。  
 reactive都`不需要.value`取值
3. 数据传递方面:  
 解构赋值会使reactive丢失响应性, 而{ref(1), ref(2)}不会
4. 原理角度:  
 ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。  
 reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。



> 
> ##### 7问: watch 和 watchEffect
> 
> 
> 


* watch使用:

// 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, 有什么优势吗?
> 
> 
> 


1. Options API 存在的问题, 新增或者修改一个需求，就需要分别在data，methods，computed里修改 。而组合式API这种情况只需要在特定的代码块里新增修改, `代码组织结构更优雅`
2. 组合式API 代码粒度更加细腻(相较于组件), use函数使得`逻辑提取和重用`的成本更低, 代码维护性更强
3. 开发者可以只需关注`实际的业务逻辑`, 而不是散落在各处(监视、计算、方法 Option)业务逻辑附属品



> 
> ##### 9问: 什么是SSR(服务端渲染),原理是什么? 好处有哪些?
> 
> 
> 


* ssr全称server side render, 前端页面的产生是由服务器端生成的，我们就称之为服务端渲染。
* 对比客户端渲染?(client side render, CSR)  
 CSR执行流程：浏览器加载html文件 -> 浏览器下载js文件 -> 浏览器运行vue代码 -> 渲染页面  
 SSR执行流程：浏览器加载html文件 -> 服务端装填好内容 -> 返回浏览器渲染
* 使用SSR的好处?(何时该使用SSR?):
	1. 对SEO有利：搜索引擎的爬虫爬取你的页面信息，因为大多数爬虫并不支持等待前端获取数据后再爬取数据的，而有了SSR以后，这些抓取工具就可以立刻得到完整的HTML结构化数据，从而被纳入搜索引擎。
	2. 更短的白屏时间：服务端渲染并不需要加载和执行大量的js脚本, 直接渲染服务端给出的html字符串, 从而缩短首屏加载时间
* 不好的地方: 前后端分工搭配复杂, 原本一个页面, 同时由前后端绘制填充
* 服务端渲染 (SSR): [vue3官方文档]( )



> 
> ##### 10问: 还能想到Vue3其他不同于vue2的细节点吗?(考察宽度, 使用度)
> 
> 
> 


* Vue3.0中对这些API做出了调整：全局API的转移




| 2.x 全局 API（`Vue`） | 3.x 实例 API (`app`) |
| --- | --- |
| Vue.config.xxxx | app.config.xxxx |
| Vue.config.productionTip | **移除** |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
| Vue.prototype | app.config.globalProperties |


* 简化了`slot插槽`使用, vue2中作用域插槽: 必须两个属性: slot=‘slotName’ slot-scope=‘prop’; vue3则是`#slotName='prop'`
* vue实例的创建方法不同:

/** vue2 **/

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

t=‘slotName’ slot-scope=‘prop’; vue3则是#slotName='prop'

• vue实例的创建方法不同:

/\*\* vue2 \*\*/


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/fc6e6d173572d4c965433a412b2d6f7f.webp?x-oss-process=image/format,png)