第四节:全面理解 vue3 中reactive, ref, readonly 响应式核心API的使用

前言

上一章,我们学习了组合式API的入口setup钩子函数. 那么本章就带着大家进入组合式API的学习.

通过vue官网查看组合式API , 相对来说还是比较多的

本章主要针对vue3组合式API 中响应式核心reactive, ref,Readonly三个API的讲解

1. reactive

在vue2中定义在data选项中的数据会自动被vue处理为响应式数据, 所谓的响应式数据, 就是被vue给检测的数据, 当数据发生变化时, vue会自动处理一些副作用, 比如页面重新渲染.

在vue3中, 不推荐使用data选项, 使用setup钩子函数, 在setup函数中, 如果需要使用响应式数据, 就需要我们通过API进行创建.

1.1. reactive 基本使用

reactive是vue3提供的用于创建响应式数据的API, 本质就是一个函数, 我们看一下具体的函数类型

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

通过vue提供的reactive 函数的TypeScript类型, 可以看到,reactive 接受一个对象作为参数, 返回一个这个对象的响应式代理

因此我们可以使用 reactive() 函数创建一个响应式对象或数组：

创建响应数据

// 创建响应对象
const obj = reactive({
   
    count:10 })

// 创建响应数组
const arr = reactive([10,20])

示例:

<template>
  <div class="">
    <h3>Reactivity</h3>
    <div>用户1(reactive创建的响应对象): {
  
  { user }}</div>
    <div>用户2(普通对象): {
  
  { person }}</div>
    <button @click="change">修改响应数据</button>
    <button @click="changeObj">修改普通对象数据</button>
  </div>
</template>

<script lang="ts">
import {
     
      defineComponent,  reactive } from 'vue';

export default defineComponent({
     
     
  setup(props, ctx) {
     
     
    // 通过reactive 创建一个响应对象user
    const user = reactive({
     
      name: '张三', age: 18 })
    // 修改响应数据
    const change = () => {
     
     
      user.name = '张三22'

    }


    // 创建一个普通对象
    const person = {
     
      name: '李四' }
    // 修改普通对象数据
    const changeObj = () => {
     
     
      person.name = '李四222'
    }
    return {
     
      user, person, change, changeObj }

  }
})
</script>

多次点击修改按钮, 结果如下

通过示例的运行结果, 我们有如下总结:

1. 无论是reactive 函数创建响应对象,还是普通对象数据, 初始都会渲染视图
2. reactive 函数返回的响应对象,在修改数据时,视图会自动更新
3. 创建普通对象在修改数据时, 视图不会发生变化
   
   

但需要注意的是, 当你多次点击普通对象修改时, 页面不会发生变化, 如果你接着点击修改响应数据, 你会发现页面渲染的普通对象数据也发生了. 原因在于视图更新,所有的数据都会数据都会用最新数据.

1.2. reactive 创建的是深层响应

reactive 创建的响应对象是深层响应, 所有嵌套的对象都会自动使用reactive 包裹创建为响应对象

示例:

<template>
  <div class="">
    <h3>Reactivity</h3>
    <div>用户: {
  
  { user }}</div>
    <button @click="change">修改响应数据</button>
   
  </div>
</template>

<script lang="ts">
import {
     
      defineComponent,  reactive } from 'vue';

export default defineComponent({
     
     
  setup(props, ctx) {
     
     
    // 通过reactive 创建一个响应对象user
    const user = reactive({
     
     
      name: '张三',
      age: 18,
      friends: {
     
     
        name: '小明',
        age: 10
      }