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 源码中还有更多复杂的逻辑和处理。不断学习中,有问题麻烦帮忙指出,感谢!

相关推荐
科技探秘人7 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人8 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR13 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香15 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969318 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai23 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc28 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91532 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json