Vue3 实战：深入理解 ref 与 reactive 的异同

2024-02-13 06:28:21

在 Vue3 中，ref 和 reactive 都是用于管理响应式数据的重要机制。乍一看，它们似乎有着相似之处，但深入挖掘，你会发现它们在底层实现和使用场景上有着本质区别。本文将带你一一揭晓这些异同，助你提升对 Vue3 响应式系统的理解。

ref：直接访问 DOM 元素

ref 的主要目的是获取 DOM 元素的引用，使其可以在 JavaScript 中访问和操作。它通过创建一个指向 DOM 元素的普通 JavaScript 对象来实现，这个对象可以通过 this.$refs 属性访问。

<template>
  <div ref="myDiv">Hello, Vue3!</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // 输出 <div>Hello, Vue3!</div>
  }
};
</script>

需要注意的是，ref 只能用于 DOM 元素，而不能用于 JavaScript 对象或其他数据类型。

reactive：创建响应式对象

reactive 的作用则是创建一个响应式的 JavaScript 对象，当它的属性发生变化时，视图也会自动更新。它利用 Proxy 代理机制，在对象属性访问或设置时触发更新。

<script>
const data = reactive({
  count: 0
});

watch(() => data.count, (newValue, oldValue) => {
  console.log(`count 发生了变化：${oldValue} -> ${newValue}`);
});

// 触发响应式更新
data.count++;
</script>

异同总结

特性	ref	reactive
作用	获取 DOM 元素引用	创建响应式对象
底层实现	JavaScript 对象	Proxy 代理
数据类型	DOM 元素	JavaScript 对象
使用场景	访问和操作 DOM 元素	管理响应式数据
更新机制	不触发视图更新	触发视图更新