Vue3手写api之reactive、readonly、ref

Vue 3 中的响应式编程 API 主要包括 reactivereadonlyref。这些 API 允许你创建具有响应式行为的数据对象。下面是手写这些 API 的简单示例:

1.reactive:

reactive 函数接受一个普通的 JavaScript 对象,并返回一个具有响应式行为的代理对象。

javascript 复制代码
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      // 在这里可以处理依赖收集
      return value;
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      // 在这里可以触发更新通知
      return result;
    },
    // 处理其他钩子如 deleteProperty 等
  });
}

const state = reactive({ count: 0 });

console.log(state.count); // 输出: 0
state.count = 1; // 触发更新

2.readonly:

readonly 函数接受一个对象,并返回一个只读的代理对象,防止被修改。

javascript 复制代码
function readonly(obj) {
  return new Proxy(obj, {
    set(target, key, value) {
      console.warn(`Cannot set ${key} on a readonly object.`);
      return true; // 阻止修改
    },
    // 处理其他钩子如 get 等
  });
}

const readOnlyState = readonly(state);

console.log(readOnlyState.count); // 输出: 1
readOnlyState.count = 2; // 不会修改成功,且会产生警告

3.ref:

ref 函数接受一个值,并返回一个包装后的对象,使其具有响应式属性 value

javascript 复制代码
function ref(value) {
  return reactive({ value });
}

const count = ref(0);

console.log(count.value); // 输出: 0
count.value = 3; // 触发更新

以上示例只是简单地演示了这些 API 的基本原理,实际的 Vue 3 源码中还有更多复杂的逻辑和处理。不断学习中,有问题麻烦帮忙指出,感谢!

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js