Ref and Reactive

Remember as much as you can:refNature is alsoreactive.ref(obj)Is equivalent toreactive({value: obj})

  • The way to implement reactive data in VUe3 is to userefandreactive, the so-called responsive interface and data synchronization, can achieve real-time update
  • In VUe2, the response is throughdefinePropertyVue3 is implemented through ES6ProxyTo implement the

1.reactive

  • The parameter to Reactive must be an object, including JSON data and arrays. Otherwise, it is not reactive
  • If you pass other objects (such as time objects) to Reactive, the change object interface does not update by default. If you want to update the object, you can do so by reassigning the object

2.ref

So why refs when you have reactive? Reactive is a problem when we only want a variable to be reactive, so VUe3 provides the ref method to listen for simple values, but it does not mean that ref can only pass in simple values. Reactive is the underlying variable, so it has everything reactive has. It’s the same old story:

Remember as much as you can:refNature is alsoreactive.ref(obj)Is equivalent toreactive({value: obj})

  • invueThe use ofrefThe value of, do not pass.valueTo obtain
  • injsThe use ofrefThe value of must pass.valueTo obtain

ShallowRef and shallowReactive

Recursive and non-recursive listening

Both REF and Reactive are recursive listeners, that is, each layer of data is responsive. If the data volume is large, performance will be consumed. Non-recursive listeners only listen to the first layer of data.

1. Ref and shallowRef

  • Each layer of data defined by ref is reactive data

  • ShallowRef defines data that is reactive only at the first level, i.e. only when.value is changed

let age = ref({
      a: '1'.f: {
        b: '2'.s: {c: '3'}}})// Prints each layer of data
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);
Copy the code

let age = shallowRef({
      a: '1'.f: {
        b: '2'.s: {c: '3'}}})// Prints each layer of data
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);
Copy the code

With shallowRef, you can use the triggerRef() method to actively update the interface

function doSome(){
  age.value.f.s.c = 'c';
  // Actively update the interface
  triggerRef(age);
}
Copy the code

2. Reactive and shallowReactive

Note: shallowReactive has no method like triggerRef()

Third, toRaw

What problem does toRaw solve?

In some cases, we do not want the data to be updated in a responsive manner. We can obtain the original data referenced by REF or Reactive through toRaw. By modifying the original data, the interface will not be updated, and only the data packaged by REF and Reactive will be changed in a responsive manner.

letobj1 = {... };// State and obj1 are references. State is essentially a Proxy object that references obj1
let state = reactive(obj1);
Obj2 is equal to obj1. Obj2 is equal to obj1
let obj2 = toRaw(state)
console.log(obj1 === obj2);//true
Copy the code

Some of you might ask, well, why don’t you just use obj1 to modify the data? The key is that when we use Reactive to define data, we usually do not define an OBJ and then pass it to Reactive. We write data directly to Reactive.

Four, markRaw

Unlike toRaw, markRaw’s packaged data is never tracked!

No use found yet (manual dog head)

let obj1 = {name: "lijing".age: 18}
let obj2 = markRaw(obj1);
// The data wrapped in Reactive is a reactive object, but it will not be traced and will not have effect-style effects
let state1 = reactive(obj2)

console.log(obj1 === obj2);//true
Copy the code

ToRef and toRefs

Ref and toRef are both used to construct responsive data, so what’s the difference between them? Two examples

1. ref

Replication and modification of responsive data will not affect the previous data, and the interface will be automatically updated when the data changes

The converted is a RefImpl type

As you can see, a reactive modification of a simple data type attribute of an object using ref does not affect the original data by modifying the reactive data. As shown in the figure above, the value of the A attribute in Obj1 does not change after the value is modified through state1. One caveat here: The property to be modified must be a simple datatype, a concrete value, not a reference. If the property is also an object, it will affect because the object –> reference!

For example, in the example above, if obj1.f is passed to state1, the situation is completely different

// equivalent let state1 = ref({b: '2',s: {c: '3'}})
Let state1 = reactive({value: {.... }}})
let state1 = ref(obj1.f);
Copy the code

2. toRef

If toRef is used for transformation, modifying reactive data affects the original data and changes the data, but the interface does not update automatically

The converted object is an ObjectRefImpl type

Ref is like a deep copy, and toref is like a shallow copy

3. toRefs

Iterate over all properties of the object to make it responsive, because toRef can only pass one key, and toRefs achieves the same effect

Tips: Refs and Reactive are the most commonly used at present. Other things are generally used to improve performance in the later stage.