快速了解Vue中实现响应式数据绑定的两种不同方式:ref与reactive

响应式数据绑定

在Vue.js的框架中，响应式数据绑定是其核心特性之一，它使得开发者能够轻松地实现数据与视图的同步更新。而在实现这一特性的过程中，ref与reactive这两个API扮演了至关重要的角色。它们为开发者提供了灵活且强大的方式来管理和操作响应式数据，使得Vue.js应用能够更加高效和易于维护。本文将通过实例探讨ref与reactive的区别和相同点，帮助正在入门vue的掘友快速牛鼻起来。

ref

ref主要用于处理基本数据类型（如字符串、数字、布尔值等）以及需要单独包裹的复杂数据类型（如对象或数组）。通过.value属性，ref能够创建一个响应式对象，该对象在其值发生变化时，能够自动触发视图的更新，以实现对数据变化的监听和响应。

reactive

reactive适用于处理整个对象的响应式需求。它通过对对象的所有属性进行代理，实现了对整个对象的深度响应式。这意味着，无论对象中的哪个属性发生变化，reactive都能够捕捉到这一变化，并相应地更新视图。然而，由于需要对对象的所有属性进行代理，reactive在性能上的开销相对较大，特别是在处理大型对象或复杂数据结构时。

给个例子就一下明白了，来：

这里默认掘友已经了解了vue3的项目名启动流程,不清楚的可以参考我这篇：Vue Router入门：“路由切换”实现话题经常在掘井学习的小伙伴会发现掘金主页导航栏有许多链接(首页，BOT等等) - 掘金里面有详细的启动流程。

App.vue

<script setup>
// composition API 组合式API
import {
  ref,//  简单数据类型
  reactive,// 复杂数据类型

} from 'vue'// 从vue中解构出ref和reactive

// 组合API
// counter 计数业务
const count = ref(0);//简单数据类型
const increment = () => {
  count.value++;//value
};

// user form 对象数据业务
const state = reactive({
  name:'Alice',
  age:25
})

/**
 * 更新 state 对象的函数
 * 该函数会修改 state 对象的 name 属性为 'Bob'，并将 age 属性加 1
 */
const updateState = () => {
  // 修改 state 对象的 name 属性为 'Bob'
  state.name = 'Bob';
  // 将 state 对象的 age 属性加 1
  state.age++;
}


</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">increment</button>

    <p>Name:{{ state.name }}</p>
    <p>Age:{{ state.age }}</p>
    <button @click="updateState">Update State</button>
  </div>
  
</template>

<style scoped>

</style>

这里分别用ref，reactive实现了简单的计数功能和用户的信息功能：

使用ref创建了一个名为count的响应式变量，初始值为0。

定义了一个名为increment的函数，当调用此函数时，count的值会增加1,count是一个ref对象，其值需要通过.value属性访问。

在模板中，通过{{ count }}显示计数器的当前值。

提供了一个按钮，当点击时，会调用increment函数，从而增加计数器的值。

用户信息更新功能：

使用reactive创建了一个名为state的响应式对象，包含name和age两个属性，初始值分别为'Alice'和

定义了一个名为updateState的函数，当调用此函数时，state对象的name属性会被更新为'Bob'，age属性会增加1。

在模板中，通过{{ state.name }}和{{ state.age }}分别显示用户名称和年龄的当前值。

提供了一个按钮，当点击时，会调用updateState函数，从而更新用户信息

看效果

建议

ref能够实现:创建一个响应式对象，该对象在其值发生变化时，能够自动触发视图的更新的底层原理这种机制主要依赖于JavaScript的Object.defineProperty方法或ES6的Proxy对象（取决于Vue.js的版本和配置）。掘友可以多去了解它的底层原理，让自己更加牛币起来。

作者：坐镇指挥

链接：https://juejin.cn

+友情链接