web前端面试高频考点——Vue3.x新增API（生命周期，ref、toRef 和 toRefs 的理解和最佳使用方式）

ゝ一纸荒年。 2023-09-28 22:49 28阅读 0赞

## 系列文章目录 ##

<table> 
 <thead> 
  <tr> 
   <th>内容</th> 
   <th>参考链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>JavaScript 面试高频考点</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126056763?spm=1001.2014.3001.5501" rel="nofollow">HTML、CSS、JavaScript、ES6、AJAX、HTTP 面试考点 </a></td> 
  </tr> 
  <tr> 
   <td>Vue2.x 面试高频考点</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126415651?spm=1001.2014.3001.5501" rel="nofollow">Vue2.x 面试高频考点</a></td> 
  </tr> 
  <tr> 
   <td>Vue3.x新增API</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126630532?spm=1001.2014.3001.5501" rel="nofollow">生命周期，ref、toRef 和 toRefs 的理解和最佳使用方式</a></td> 
  </tr> 
  <tr> 
   <td>Vue3.x升级的重要功能</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126646644?spm=1001.2014.3001.5501" rel="nofollow">emits属性、生命周期、多事件、Fragment、移出.async、异步组件写法、移出 filter、Teleport、Suspense…</a></td> 
  </tr> 
  <tr> 
   <td>Vue3.x响应式</td> 
   <td><a href="http://t.csdn.cn/rLPzf" rel="nofollow">Composition API的逻辑复用、Proxy实现响应式</a></td> 
  </tr> 
  <tr> 
   <td>Vue3.x深入理解</td> 
   <td><a href="http://t.csdn.cn/E7Zki" rel="nofollow">v-model参数用法、watch和watchEffect区别等</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 文章目录 ####

*  系列文章目录
 *   *  一、Vue3 比 Vue2 有什么优势？
     *  二、Vue2 和 Vue3 生命周期区别
     *   *  1、Options API 生命周期
         *  2、Composition API 生命周期
     *  三、如何理解 Composition API 和 Options API
     *   *  1、Composition API 带来了什么
         *  2、Composition API 和 Options API 如何选择？
         *  3、如何选择
         *  4、别误解 Composition API
     *  四、如何理解 ref、toRef 和 toRefs
     *   *  1、ref
         *  2、ref 扩展（获取模板的dom元素）
         *  3、toRef
         *  4、toRefs
     *  五、ref、toRef 和 toRefs 的最佳使用方式

--------------------

### 一、Vue3 比 Vue2 有什么优势？ ###

*  性能更好
 *  体积更小
 *  更好的 ts 支持
 *  更好的代码组织
 *  更好的逻辑抽离
 *  更多新功能

### 二、Vue2 和 Vue3 生命周期区别 ###

App.vue 父组件：

<template>
      <div>
        <life-cycles :msg="msg" v-if="flag" />
        <button @click="changeHandler">change msg</button>
        <button @click="changeFlagHandler">change flag</button>
      </div>
    </template>
    
    <script>
    import LifeCycles from "./components/LifeCycles.vue";
    export default {
        
      data() {
        
        return {
        
          msg: "hello vue3",
          flag: true,
        };
      },
      methods: {
        
        changeHandler() {
        
          this.msg = "hello vue3" + Date.now();
        },
        changeFlagHandler() {
        
          this.flag = !this.flag;
        },
      },
      components: {
         LifeCycles },
    };
    </script>

#### 1、Options API 生命周期 ####

LiftCycles.vue 子组件：

*  Vue2.x 的形式
 *  点击按钮进行 **组件更新** 和 **组件销毁**（查看控制台输出内容）

<template>
      <p>生命周期 {
        {
         msg }}</p>
    </template>
      
    <script>
    export default {
        
      name: "LiftCycles",
      props: {
        
        msg: String,
      },
      beforeCreate() {
        
        console.log("beforeCreate");
      },
      created() {
        
        console.log("created");
      },
      beforeMount() {
        
        console.log("beforeMount");
      },
      mounted() {
        
        console.log("mounted");
      },
      beforeUpdate() {
        
        console.log("beforeUpdate");
      },
      updated() {
        
        console.log("updated");
      },
      beforeUnmount() {
        
        console.log("beforeUnmount");
      },
      unmounted() {
        
        console.log("unmounted");
      },
    };
    </script>

![在这里插入图片描述][0263cf6cc47b48ce9c3bdbda5b0d7e1b.png]

--------------------

![在这里插入图片描述][eba7fabd02524be09c5e60fda123d55c.png]

--------------------

![在这里插入图片描述][2a06b0ff4a4a42818ecdd1faac1cdef2.png]

--------------------

#### 2、Composition API 生命周期 ####

*  beforeDestroy 改为 beforeUnmount
 *  destroyed 改为 unmounted
 *  其他沿用 Vue2 的生命周期

<template>
      <p>生命周期 {
        {
         msg }}</p>
    </template>
      
    <script>
    import {
        
      onBeforeMount,
      onMounted,
      onBeforeUpdate,
      onUpdated,
      onBeforeUnmount,
      onUnmounted,
    } from "vue";
    
    export default {
        
      name: "LiftCycles",
      props: {
        
        msg: String,
      },
      // 等于 beforeCreate 和 created
      setup() {
        
        console.log("setup");
    
        onBeforeMount(() => {
        
          console.log("onBeforeMounted");
        });
        onMounted(() => {
        
          console.log("onMounted");
        });
        onBeforeUpdate(() => {
        
          console.log("onBeforeUpdate");
        });
        onUpdated(() => {
        
          console.log("onUpdated");
        });
        onBeforeUnmount(() => {
        
          console.log("onBeforeUnmount");
        });
        onUnmounted(() => {
        
          console.log("onUnmounted");
        });
      },
    };
    </script>

![在这里插入图片描述][ea508b6b80fa4043a97e6d417aa4c1d2.png]

--------------------

![在这里插入图片描述][1a53bdd942774f5ab19cca25907382f3.png]

--------------------

![在这里插入图片描述][56aad59cf67f42d1a4aea3b4a52fe070.png]

--------------------

### 三、如何理解 Composition API 和 Options API ###

Options API 对比 Composition API：

![请添加图片描述][4cd576a35453411ab03607b3b1f0dcd9.gif]

#### 1、Composition API 带来了什么 ####

*  更好的代码组织
 *  更好的逻辑复用
 *  更好的类型推导

#### 2、Composition API 和 Options API 如何选择？ ####

*  不建议共用，容易引起代码混乱
 *  Composition API 用于复杂的业务情况
 *  Options API 用于简单的业务情况

#### 3、如何选择 ####

*  不建议乱用，会引起混乱
 *  小型项目、业务逻辑简单，用 Options API
 *  中大型项目、逻辑复杂，用 Composition API

#### 4、别误解 Composition API ####

*  Composition API 属于高阶技巧，不是基础必会
 *  Composition API 是为解决复杂业务逻辑而设计
 *  Composition API 就像 Hooks 在 React 中的地位

### 四、如何理解 ref、toRef 和 toRefs ###

#### 1、ref ####

*  生成值类型的响应式数据
 *  可以用于 reactive，也可以用于模板（不需要 .value）
 *  用 .value 去修改值
 *  所有的 ref 变量，尽量使用 xxxRef 的格式命名，便于区分

Ref.vue 组件

*  ref 用来定义响应式的值类型
 *  reactive 用来定义响应式的引用类型
 *  ref 定义的值类型可在 reactive 和 模板中直接使用（不需要 `.value`）
 *  修改值的时候要使用 `.value`

<template>
      <p>ref demo {
        {
         ageRef }} {
        {
         state.name }}</p>
    </template>
      
    <script>
    import {
         ref, reactive } from "vue";
    export default {
        
      name: "Ref",
      setup() {
        
        const ageRef = ref(21); // 值类型 响应式
        const nameRef = ref("杂货铺");
    
        const state = reactive({
        
          name: nameRef,
        });
    
        setTimeout(() => {
        
          console.log("ageRef", ageRef.value);
    
          ageRef.value = 18; // .value 修改值
          nameRef.value = "前端杂货铺";
        }, 1000);
    
        return {
        
          ageRef,
          state,
        };
      },
    };
    </script>

![在这里插入图片描述][d5aad24e7e8c4c69a4268b0f64503521.png]

--------------------

![在这里插入图片描述][31f9df83de834921b63ec0e226664d42.png]

--------------------

#### 2、ref 扩展（获取模板的dom元素） ####

RefTemplate.vue 组件

*  ref 本身的意思就是一个引用，给它传什么，它就是指向什么
 *  传一个 DOM 当然就指向 DOM 了

<template>
      <p ref="elemRef">我是一行文字</p>
    </template>
    
    <script>
    import {
         ref, onMounted } from "vue";
    export default {
        
      name: "RefTemplate",
      setup() {
        
        const elemRef = ref(null);
    
        onMounted(() => {
        
            console.log('ref template', elemRef.value.innerHTML, elemRef.value);
        })
    
        return {
        
          elemRef,
        };
      },
    };
    </script>

![在这里插入图片描述][58d7079b230d4a1b97a04a2a1b2c2f4f.png]

--------------------

#### 3、toRef ####

*  针对一个响应式对象（reactive）的 prop（属性）
 *  创建一个 ref，具有响应式
 *  两者保持引用关系

toRef.vue 组件

*  `toRef(对象, "属性")` 修改响应式对象的属性
 *  改变 ageRef 时， state.age 也会改变
 *  改变 state.age 时，ageRef 也会改变

<template>
      <p>toRef demo - {
        {
         ageRef }} - {
        {
         state.name }} - {
        {
         state.age }}</p>
    </template>
    
    <script>
    import {
         reactive, toRef } from "@vue/reactivity";
    
    export default {
        
      name: "ToRef",
      setup() {
        
        const state = reactive({
        
          age: 20,
          name: "杂货铺",
        });
    
        // toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式
        // const state = {
        
        //     age: 20,
        //     name: '杂货铺'
        // }
    
    	// 修改响应式对象（reactive）的一个属性（age）
        const ageRef = toRef(state, "age");
    
        setTimeout(() => {
        
          state.age = 25;
        }, 1000);
    
        setTimeout(() => {
        
          ageRef.value = 30; // 用 .value 修改值
        }, 2000);
    
        return {
        
          state,
          ageRef,
        };
      },
    };
    </script>

![在这里插入图片描述][38542902527f4b4a8de334a4ad242702.png]

--------------------

![在这里插入图片描述][365b86454f5c4cf0bc2090bba47c0c35.png]

--------------------

![在这里插入图片描述][3f488a6973344955860a22e02ee398ef.png]

#### 4、toRefs ####

*  将响应式对象（reactive 封装）转换为普通对象
 *  对象的每个 prop 都是对应的 ref
 *  两者保持引用关系

toRefs 组件

*  toRefs，将响应式对象变为普通对象（仍然具有响应式）
 *  对象的每个属性都是对应的 ref

<template>
      <p>toRefs demo {
        {
         ageRef }} {
        {
         nameRef }}</p>
    </template>
    
    <script>
    import {
         toRefs, reactive } from "vue";
    export default {
        
      name: "ToRefs",
      setup() {
        
        const state = reactive({
        
          age: 20,
          name: "杂货铺",
        });
    
        // 将响应式对象，变为普通对象
        const stateAsRefs = toRefs(state); 
    
        // 每个属性，都是 ref 对象
        const {
         age: ageRef, name: nameRef } = stateAsRefs; 
    
        setTimeout(() => {
        
          state.age = 25
        }, 1000)
    
        return {
        
          ageRef,
          nameRef,
        };
      },
    };
    </script>

![在这里插入图片描述][57d1438db4ba4d029f9f48b10371d9a0.png]

**或者这么写（推荐）：**

*  直接返回这个普通对象
 *  注意此时模板内容也发生了变化，直接写对象里面的属性

<template>
      <p>toRefs demo {
        {
         name }} {
        {
         age }}</p>
    </template>
    
    <script>
    import {
         toRefs, reactive } from "vue";
    export default {
        
      name: "ToRefs",
      setup() {
        
        const state = reactive({
        
          age: 20,
          name: "杂货铺",
        });
    
        // 将响应式对象，变为普通对象
        const stateAsRefs = toRefs(state); 
    
    	setTimeout(() => {
        
          state.age = 25
        }, 1000)
        
        return stateAsRefs
      },
    };
    </script>

![在这里插入图片描述][57cdd44fb9c54a1ea1590dc59b4c98ae.png]

![在这里插入图片描述][57d1438db4ba4d029f9f48b10371d9a0.png]

### 五、ref、toRef 和 toRefs 的最佳使用方式 ###

*  用 reactive 做对象的响应式，用 ref 做值类型的响应式
 *  setup 中返回 toRefs(state)，或者 toRefs(state, ‘xxx’)
 *  ref 的变量命名都用 xxxRef
 *  合成函数返回响应式对象时，使用 toRefs

xxx.js 文件

*  定义函数和响应式对象
 *  返回时转为 ref

import {
         toRefs, reactive } from "vue"
    
    function useFeatureX() {
        
        const state = reactive({
        
          x: 1,
          y: 2
        })
      
        // 逻辑运行状态，省略 N 行
          
        // 返回时转换为 ref
        return toRefs(state)
    }
    
    export default useFeatureX

xxx.vue 组件

*  使用时直接写对象的属性就可以

export default {
        
      setup() {
        
        // 可以在不是去响应式的情况下破坏结构
        const {
         x, y } = useFeatureX()
    
        return {
        
          x,
          y
        }
      } 
    }

`不积跬步无以至千里 不积小流无以成江海`

> 这篇文章如果对你有些许帮助，还请铁铁 三连 + 关注 支持一波，优质好文，正在产出…

[0263cf6cc47b48ce9c3bdbda5b0d7e1b.png]: https://img-blog.csdnimg.cn/0263cf6cc47b48ce9c3bdbda5b0d7e1b.png
[eba7fabd02524be09c5e60fda123d55c.png]: https://img-blog.csdnimg.cn/eba7fabd02524be09c5e60fda123d55c.png
[2a06b0ff4a4a42818ecdd1faac1cdef2.png]: https://img-blog.csdnimg.cn/2a06b0ff4a4a42818ecdd1faac1cdef2.png
[ea508b6b80fa4043a97e6d417aa4c1d2.png]: https://img-blog.csdnimg.cn/ea508b6b80fa4043a97e6d417aa4c1d2.png
[1a53bdd942774f5ab19cca25907382f3.png]: https://img-blog.csdnimg.cn/1a53bdd942774f5ab19cca25907382f3.png
[56aad59cf67f42d1a4aea3b4a52fe070.png]: https://img-blog.csdnimg.cn/56aad59cf67f42d1a4aea3b4a52fe070.png
[4cd576a35453411ab03607b3b1f0dcd9.gif]: https://img-blog.csdnimg.cn/4cd576a35453411ab03607b3b1f0dcd9.gif
[d5aad24e7e8c4c69a4268b0f64503521.png]: https://img-blog.csdnimg.cn/d5aad24e7e8c4c69a4268b0f64503521.png
[31f9df83de834921b63ec0e226664d42.png]: https://img-blog.csdnimg.cn/31f9df83de834921b63ec0e226664d42.png
[58d7079b230d4a1b97a04a2a1b2c2f4f.png]: https://img-blog.csdnimg.cn/58d7079b230d4a1b97a04a2a1b2c2f4f.png
[38542902527f4b4a8de334a4ad242702.png]: https://img-blog.csdnimg.cn/38542902527f4b4a8de334a4ad242702.png
[365b86454f5c4cf0bc2090bba47c0c35.png]: https://img-blog.csdnimg.cn/365b86454f5c4cf0bc2090bba47c0c35.png
[3f488a6973344955860a22e02ee398ef.png]: https://img-blog.csdnimg.cn/3f488a6973344955860a22e02ee398ef.png
[57d1438db4ba4d029f9f48b10371d9a0.png]: https://img-blog.csdnimg.cn/57d1438db4ba4d029f9f48b10371d9a0.png
[57cdd44fb9c54a1ea1590dc59b4c98ae.png]: https://img-blog.csdnimg.cn/57cdd44fb9c54a1ea1590dc59b4c98ae.png