开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言

Vue3响应式数据是如何实现的，又有那些需要我们注意的方面呢？Vue3通过ref与reactive定义响应式数据，我们一起来了解下吧！

一、ref函数

ref定义一个响应式的数据，加工的数据会变成一个对象，是RefImpl的对象，在js操作中改变一个变量的值需要.value，但在模板中引用的时候不需要加.value,如果加工的数据是一个对象，那ref会把对象转成代理对象（proxy）。

<template>
  <h1>姓名：{{name}}</h1>
  <h1>职位：{{job.name}}</h1>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    // 数据
    let name = ref('张三')
    let job = ref({
      type: '研发',
      name: '前端工程师'
    })
    // 方法
    function changeInfo() {
      name.value = '李四'
      job.value.name = '后端工程师'
    }
    return {
      name,
      job,
      changeInfo
    }
  }
}
</script>

二、reactive函数

reactive定义一个对象类型的响应式数据（基本类型用ref）,返回一个代理对象（Proxy的实例对象），是深层次的，内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

<template>
  <h1>姓名：{{person.name}}</h1>
  <h1>职位：{{person.job.name}}</h1>
  <h1>爱好：{{person.hobby[0]}}</h1>
  <button @click="changeInfo">修改信息</button>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    // 数据
    let person = reactive({
      name: '张三',
      job: {
        type: '研发',
        name: '前端工程师'
      },
      hobby: ['抽烟', '喝酒', '烫头']
    })
    // 方法
    function changeInfo() {
       person.name = '李四'
       person.job.name = '后端工程师'
       person.hobby[0] = '学习'
    }
    return {
      person,
      changeInfo
    }
  }
}
</script>

三、reactive与ref对比

• 定义数据角度
  • ref通常用来定义基本类型数据（也可以用来定义对象（或数组）类型的数据，但是他的内部会自动通过reactive转成代理对象，那还不如直接使用reactive呢）
  • reactive用来定义对象（或数组）类型数据
• 原理角度
  • ref通过Object.defineProparty()的get和set实现响应式
  • reactive是通过使用Proxy来实现响应式，并通过Reflect操作源对象内部的数据
• 使用角度
  • ref定义的数据在操作的时候需要用.value,读取的时候不需要.value
  • reactive定义的数据操作和读取时都不需要.value

结束语

这一章我们学习了Vue3响应式代码，但是响应式原理是什么呢，下一章让我们一起了解下响应式原理吧！