vue3.0 reactive函数

Posted 2023-05-16

参考技术A reactive（）函数接收一个普通对象，返回一个响应式的数据对象。

基本语法

import reactivefrom "@vue/composition-api"  //按需导入函数

const state=reactive(count:0) //得到的state类似于vue2.x中date返回的响应式数据对象

在setup()函数中调用reactive（）函数创建响应式数据对象

setup

const state=reactive(count:0)

return state  //将响应式数据对象return出去供template使用



在template中访问

<P>当前count的值为count <P/>

vue3手写reactive深的劫持深的监视深的响应数据

目录

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

---

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;


// 定义一个reactiveHandler处理对象
const reactiveHandler = 
  // 获取属性值
  get(target, prop) 
    if (prop === '_is_reactive') return true;
    const result = Reflect.get(target, prop);
    console.log('拦截了读取数据', prop, result);
    return result;
  ,
  // 修改属性值或者是添加属性
  set(target, prop, value) 
    const result = Reflect.set(target, prop, value);
    console.log('拦截了修改数据或者是添加属性', prop, value);
    return result;
  ,
  // 删除某个属性
  deleteProperty(target, prop) 
    const result = Reflect.deleteProperty(target, prop);
    console.log('拦截了删除数据', prop);
    return result;
  

---

2、调用函数

const proxyUser2 = reactive(
      name: '小明',
      car: 
        color: 'red'
      
);
// 拦截到了读和修改的数据
proxyUser2.name += '==';
// 拦截到了读和修改的数据
proxyUser2.car.color = '==';
// 拦截了删除
delete proxyUser2.name;
// 拦截到了读和拦截到了删除
delete proxyUser2.car.color;