Vue.js 中的 ref 函数：赋能响应式编程

2023-11-18 20:18:22

在 Vue.js 的世界中，响应式编程是实现动态交互式界面的基石。在 Vue 3 中，ref 函数扮演着至关重要的角色，将原始值转变为响应式对象，从而赋予开发人员对数据的全面控制。

从原始值到响应式对象的演变

在 Vue 3 中，ref 函数将 JavaScript 原始值（如字符串、数字或布尔值）包裹在一个响应式对象中。这意味着当原始值的底层值发生变化时，响应式对象也会相应地更新，从而触发视图的重新渲染。

自己实现 ref 函数

为了更深入地理解 ref 函数的工作原理，我们可以自己实现一个简化版本：

function myRef(value) {
  // 创建响应式对象
  const obj = {
    value: value
  };

  // 响应式地更新值
  Object.defineProperty(obj, 'value', {
    get: () => obj.value,
    set: newValue => {
      obj.value = newValue;
      // 触发视图更新
      updateView();
    }
  });

  return obj;
}

使用案例

让我们用一个使用 myRef 函数的实际示例来演示：

const nameRef = myRef('John');

// 在模板中使用 ref 变量
<template>
  <h1>{{ nameRef.value }}</h1>
</template>

// 在组件中响应值变化
export default {
  mounted() {
    nameRef.value = 'Jane';
  }
}