vue3手写ref、深的ref

1、函数实现

// 定义一个reactive函数，传入一个目标对象 function reactive(target) { // 判断当前的目标对象是不是object类型(对象/数组) if (target && typeof target === 'object') { // 对数组或者是对象中所有的数据进行reactive的递归处理 // 先判断当前的数据是不是数组 if (Array.isArray(target)) { // 数组的数据要进行遍历操作0 target.forEach((item, index) => { // 如果数组中还有数组 // 使用递归 target[index] = reactive(item); }); } else { // 再判断当前的数据是不是对象 // 对象的数据也要进行遍历的操作 Object.keys(target).forEach(key => { target[key] = reactive(target[key]); }); } return new Proxy(target, reactiveHandler); } // 如果传入的数据是基本类型的数据，那么就直接返回 return target; } // 定义一个ref函数 function ref(target) { target = reactive(target); return { _is_ref: true, // 标识当前的对象是ref对象 // 保存target数据保存起来 _value: target, get value() { console.log('劫持到了读取数据'); return this._value; }, set value(val) { console.log('劫持到了修改数据，准备更新界面', val); this._value = val; } } } 

2、函数调用

const ref2 = ref({ name: '小明', car: { color: 'red' } }); console.log(ref2.value); // 劫持到 ref2.value = '=='; // 劫持到 ref2.value.car = '==';