前端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 和 watchEffect
- 8问: vue3的Composition API 相比于2的Options API, 有什么优势吗?
- 9问: 什么是SSR(服务端渲染),原理是什么? 好处有哪些?
- 10问: 还能想到Vue3其他不同于vue2的细节点吗?(考察宽度, 使用度)
1问: vue3和vue2有哪些不同?
- 响应式系统的重构,使用proxy替换Object.defineProperty属性,优势:
- Proxy可直接监听 对象
添加/删除
属性; - Proxy直接监听 数组的变化
- Proxy监听的目标是对象本身,不需要像Object.defineProperty那样遍历每个属性,有一定的性能提升
- Proxy可直接监听 对象
- 新增
组合式API
(Composition API),更好的逻辑重用和代码组织:- setup配置
- ref与reactive
- watch与watchEffect
- provide与inject
- 重构虚拟 DOM, diff算法
- 生命周期更名
- beforeDestroy改名为 beforeUnmount
- destroyed改名为 unmounted
// Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
beforeCreate ===> setup()
created ===> setup()
beforeMount ===> onBeforeMount
mounted ===> onMounted
beforeUpdate ===> onBeforeUpdate
updated ===> onUpdated
beforeUnmount===> onBeforeUnmount
unmounted ===> onUnmounted
- 新的内置组件
- Fragment
- Teleport
- Suspense
- 移除的部分:
- 移除v-on.keyCode修饰符,同时也不再支持config.keyCodes
- 移除v-on.native修饰符,
- 移除过滤器(filter)
不
再建议使用mixins, 组合式函数本身就是更好的mixin代替品
2问: Vue3.0中的响应式原理是什么?vue2的响应式原理是什么?
vue2.x的响应式原理
- 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)
- 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
- 存在问题:
- 新增属性、删除属性, 界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。
- 追问: vue2如何解决这些问题? 答:
$set
vue3.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响应性判断函数?
-
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 区别?
- 简单来说, ref通常用来定义
基本类型
数据, reactive用来定义对象(或者数组)
类型数据
注: ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象。 - 使用方面: ref 操作数据
需要.value
取值,template模板中不需要。
reactive都不需要.value
取值 - 数据传递方面:
解构赋值会使reactive丢失响应性, 而{ref(1), ref(2)}不会 - 原理角度:
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, 有什么优势吗?
- 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.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 **/
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
, 实现双向绑定
等等…