vue3 ref原理

作者：残情弑天发布日期:2025-07-25 浏览:12

// 引入 Vue 3
import { ref, watch } from 'vue';

// 创建一个 ref 对象，初始值为 0
const count = ref(0);

// 修改 ref 的值
count.value = 1;

// 监听 ref 的变化
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

// 解释说明：
// ref 是 Vue 3 中用于创建响应式数据的基本方法之一。它接受一个内部值，并返回一个响应式的且可变的引用对象。
// 该引用对象有一个单一的 .value 属性，指向内部值。当 .value 被修改时，Vue 会自动追踪这些变化并更新相关的视图。
// 在上面的例子中，我们创建了一个名为 count 的 ref 对象，初始值为 0。通过修改 count.value，我们可以改变它的值。
// 使用 watch 函数可以监听 ref 的变化，并在变化时执行相应的回调函数。

上一篇：vue webpack配置

下一篇：vue嵌入第三方页面