9 Vue3.x 面试题（SY）

最新推荐文章于 2024-07-18 09:37:35 发布

Until2028

最新推荐文章于 2024-07-18 09:37:35 发布

阅读量174

点赞数

分类专栏：双越文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/harvestuachieve/article/details/126835859

版权

双越专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1，vue3比vue2，有什么优势？

性能更好

体积更小

更好的ts支持

更好的代码组织

更好的逻辑抽离

更多新功能

2，描述vue3生命周期

Options API 生命周期
- beforeDestroy 改为 beforeUnmount
- destroyed 改为 unmounted
- 其他沿用 Vue2 的生命周期
Composition API 生命周期
- 差不多，从 vue 中引入使用罢了
- 不过前面都加上on
- import { onBeforeMount } from 'vue'

setUp 从生命周期上来讲，等于 beforeCreate 和 created，所以 composition API 是没有 beforeCreate 和 created 生命周期的

3， composition api 和 options api ？

4，如何理解 ref toRef 和 toRefs ？

Vue3.0中的reactive
reactive 是 Vue3 中提供的实现响应式数据的方法。
在 Vue2 中响应式数据是通过 defineProperty 来实现的，
在 Vue3 中响应式数据是通过 ES6 的 Proxy来实现的。
reactive 参数必须是对象 (json / arr)
如果给 reactive 传递了其它对象
默认情况下，修改对象无法实现界面的数据绑定更新。
如果需要更新，需要进行重新赋值。(即不允许直接操作数据，需要放个新的数据来替代原数据)
#### 在 reactive 使用基本类型参数

基本类型(数字、字符串、布尔值)在 reactive 中无法被创建成 proxy 对象，也就无法实现监听。

<template>
<div>
  <p>{{msg}}</p>
  <button @click="c">button</button>
</div>
</template>
 
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    let msg = reactive(0)
    function c() {
      console.log(msg);
      msg ++;
    }
    return {
      msg,
      c
    };
  }
}
</script>

toRefs

将响应式对象（reactive封装）转换为普通对象

对象的每个prop都是对应的ref

两者保持引用关系

了解toRef：
创建一个 ref 对象，其value值指向另一个对象中的某个属性。

语法：const name = toRef(person,'name')

应用: 要将响应式对象中的某个属性单独提供给外部使用时。

扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)