本文主要是介绍vue3手写readonly、深只读，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录

• 1、函数实现
• 2、函数调用

1、函数实现

// 定义了一个readonlyHandler处理器
// 此函数被shallowReadonly和readonly共用
const readonlyHandler = {
  get(target, prop) {
    if (prop === '_is_readonly') return true;
    const result = Reflect.get(target, prop);
    console.log('拦截到了读取数据了', prop, result);
    return result;
  },
  set(target, prop, value) {
    console.warn('只能读取数据，不能修改数据或者添加数据');
    return true;
  },
  deleteProperty(target, prop) {
    console.warn('只能读取数据，不能删除数据');
    return true;
  }
}

// 定义一个readonly函数
function readonly(target) {
  // 需要判断当前的数据是不是对象
  if (target && typeof target === 'object') {
    // 判断target是不是数组
    if (Array.isArray(target)) {
      // 遍历数组
      target.forEach((item, index) => {
        target[index] = readonly(item);
      });
    } else {
      // 判断target是不是对象
      // 遍历对象
      Object.keys(target).forEach(key => {
        target[key] = readonly(target[key]);
      });
    }
    return new Proxy(target, readonlyHandler);
  }
  // 如果不是对象或者数组，那么直接返回
  return target;
}

2、函数调用

const proxyUser4 = readonly({
      name: '小明',
      cars: ['奔驰', '宝马']
});
// 拦截到了读取
console.log(proxyUser4.name);
console.log(proxyUser4.cars[0]);
// 只读的
proxyUser4.name = '哈哈';
// 只读的
proxyUser4.cars[0] = '哈哈';
delete proxyUser4.name;
delete proxyUser4.cars[0];

这篇关于vue3手写readonly、深只读的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！