Original value responsive formulas among the six basic types of Vue

The so-called original value is the responsive formula for the six basic types of values

ref

Since proxy cannot prevent the modification of the original value, this method does not work here

We can create a wrapping object to wrap the original value;

Then use reactive to turn the wrapping object into a responsive

The __v_isRef property is the criterion used to determine whether it is a ref package object.

function ref(val) {
  // Package object  const wrapper = {
    value: val,
  };
  // Criteria for ref  (wrapper, "__v_isRef", {
    value: true,
  });
  // Return responsive data  return reactive(wrapper);
}

Response is missing

Response loss problem: After using reactive to create a reactive object, and using the multi-argument form return, the return is actually a normal object rather than a reactive object!

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });
    return {
      ...obj,
    };
  },
};

Response relationship establishment

obj is the original response object

Newobj has all attribute values ​​with the same name as obj, and write the accessor attribute value one by one

value Returns the value in the original response object after execution

In this way, after modifying the obj attribute, the side effect function execution will be automatically triggered!

const obj = reactive({ a: 1, b: 2 });
const newobj = {
  a: {
    get value() {
      return ;
    },
  },
  b: {
    get value() {
      return ;
    },
  },
};
();

Implementation of toRef function

Use a wrapper, add getter and setter methods internally to achieve responsiveness

function toRef(obj, key) {
  const wrapper = {
    get value() {
      return obj[key];
    },
    set value(val) {
      obj[key] = val;
    },
  };
  (wrapper, "__v_isRef", {
    value: true,
  });
  return wrapper;
}

Automatically remove ref

Using proxy

Determine if there are attributes__v_isRef, indicating that it is ref, then the value of the ref is returned;

If it's just a normal object, then return as it is

function proxyRefs(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const value = (target, key, receiver);
      return value.__v_isRef ?  : value;
    },
  });
}

reactive is an example of automatically removing ref. When using it, you can get the value without calling the value

This is the end of this article about the original value responsiveness among the six basic types of Vue. For more related content on Vue original value responsiveness, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!