高频面试题：Vue和Vue3前端面试频率较高的面试题和答案（五）（1）

最新推荐文章于 2024-08-08 12:12:24 发布

夲奋亻Jay

最新推荐文章于 2024-08-08 12:12:24 发布

阅读量473

点赞数 5

分类专栏：高频面试题 vue3 vue2.0 文章标签：前端 vue.js 面试

本文链接：https://blog.csdn.net/qq_29101285/article/details/138945995

版权

高频面试题同时被 3 个专栏收录

28 篇文章 24 订阅

订阅专栏

28 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

1. Vue 2和Vue 3之间有哪些主要区别？

答案：

性能优化： Vue 3在性能方面有显著的改进，包括更快的渲染速度和更小的包大小。
Composition API： Vue 3引入了Composition API，提供了更灵活和可复用的代码组织方式。
Typescript支持： Vue 3更好地支持Typescript，并且内置了TypeScript。
Proxy代替Object.defineProperty： Vue 3使用Proxy代替了Vue 2中的Object.defineProperty，提供了更好的性能和更好的调试。
静态tree shaking： Vue 3允许进行更好的静态tree shaking，以减少最终的包大小。

2. 请解释Vue的双向数据绑定是如何工作的。

答案： Vue中的双向数据绑定是通过v-model指令实现的。当数据发生变化时，视图会自动更新，反之亦然。这种机制通过Vue的响应式系统来实现，当数据发生变化时，相关的DOM元素会自动更新。

3. 什么是Vue组件？

答案： Vue组件是Vue应用程序的基本构建块，每个组件都包含了自己的模板、脚本和样式。组件可以被复用，可以嵌套在其他组件中，使得应用程序的结构更加清晰和可维护。

4. Vue中的指令是什么？请给出一些常用的指令。

答案： 指令是Vue模板中特殊的标记，用于实现DOM操作和数据绑定。一些常用的指令包括：

v-if： 根据表达式的值条件性地渲染元素。
v-for： 基于数组数据渲染列表。
v-bind： 动态地绑定一个或多个属性。
v-on： 绑定事件监听器。
v-model： 实现表单元素和应用状态的双向绑定。

5. 请解释Vue的生命周期钩子函数。

答案： Vue组件具有一系列特定的生命周期钩子函数，允许我们在组件的不同阶段执行自定义逻辑。一些常用的生命周期钩子函数包括：

beforeCreate： 在实例初始化之后，数据观测和事件配置之前被调用。
created： 实例已经创建完成后被调用。
mounted： 实例已经挂载到DOM后被调用。
updated： 数据更新时被调用，DOM已经重新渲染。
beforeDestroy： 实例销毁之前调用。

6. 请解释Vue的响应式系统是如何工作的。

答案： Vue的响应式系统通过Object.defineProperty或Proxy来捕获数据的变化，当数据发生变化时，系统会自动通知相关的视图更新。这种机制使得数据和视图保持同步，并且避免了手动操作DOM。

7. vue3和vue2有哪些不同?

a. 响应式系统的重构，使用proxy替换Object.defineProperty属性，优势：

-   Proxy可直接监听 对象`添加/删除`属性;
-   Proxy直接监听 数组的变化
-   Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升

b. 新增`组合式API`(Composition API)，更好的逻辑重用和代码组织:

-   setup配置
-   ref与reactive
-   watch与watchEffect
-   provide与inject

c. 重构虚拟 DOM, diff算法

d. 生命周期更名

-   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

12345678910

e. 新的内置组件

-   Fragment
-   Teleport
-   Suspense

f. 移除的部分:

-   移除v-on.keyCode修饰符，同时也不再支持config.keyCodes
-   移除v-on.native修饰符,
-   移除过滤器（filter）
-   `不`再建议使用mixins, 组合式函数本身就是更好的mixin代替品

8.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'   

12345678910111213141516

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

9. 有哪些vue3响应性判断函数?

isRef: 检查一个值是否为一个 ref 对象
isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

10. 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 函数暴露出的内容

11: 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 等等，否则组件性能会因为依赖关系不正确而下降。

12. ref 和 reactive 区别?

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

13. 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() 

1234567

与watch不同点:
- watch需指明监听的属性
- watchEffect无需指明需要监听的属性,vue的响应性系统自动进行依赖收集,
  只要所指定的回调中用到的数据发生变化，则直接重新执行回调

14. vue3的Composition API 相比于2的Options API, 有什么优势吗?

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

15. 什么是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官方文档

16. 还能想到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)

12345678910111213141516