preface

The difference between REF and Reactive

  • Reactive uses proxy internally and REF uses defineProperty internally
  • Ref can also be used to place objects, but you need to select an extra layer. Reactive is more appropriate for objects
  • Reactive If you put normal types, non-objects will be returned directly, which is why I found out in my previous posts
  • Refs exist because Reactive can’t handle basic types

Ref core source code

The first step

Create the ref. Ts file in the source directory and create the ref function

Our next step is to turn the ordinary type passed in to an object. The core method is createRef

In addition, the source code is written now, is not found in many methods and other methods, package a layer, the reason is that our other API may also use, and by passing different parameters to achieve different functions. So Vue3 source code is basically high order function + corrie

The second step

The createRef method takes two arguments, value and whether it is shallow

Internally, it needs to return an instance of -refimpl to pass in the parameters

RefImpl class

Then, the attribute accessor of the class is used. When the value is set, track is used to collect dependencies, and when the value is set, trigger is called to trigger the update

The track and Tringger methods that we encapsulated when writing Reactive are reused

Some people may ask, I said at the beginning of the article that ref bottom is using defineProperty, where is that? In fact, the code we just wrote through Babel to es5 code is defineProperty

And then we’re going to deal with _value

When we evaluate it, we’re going to take the _value

When we update the value, we compare the new value and the old value to see if there is a change. If there is a change, we use the new value as the old value

We also need to change the _value to newVal, and then trigger the update

Shallow is then handled, and if it’s deep it needs to be programmed to be responsive

Shallow is also taken into account when we set the value

If a REF passes in multiple layers of objects, the bottom layer will call Reactive to make it reactive

ToRef core source code

You can convert the value of an object to type REF

There is also an internal instance that uses a different class than ref

ObjectRefImpl class

If we convert the value of a key to ref, we’re exposing a proxy for a property that doesn’t do anything else, so whether that property is responsive depends on whether the target of the proxy object is responsive.

Usage scenarios for toRef

When you take a property out of a reactive object and you reassign that property, it doesn’t really matter because the value is just a string, it’s not reactive. So in case the value that we get out is a string, we need to do a layer of proxy with toRef, let’s

What if I want to represent more than one person? ToRefs were born, or you couldn’t go to agencies one by one

ToRefs core source code

Arguments can be objects or arrays

Sometimes we want to structure values reactive, but the data generated by the structure is not reactive, so we need toRefs to process it, which is like Vue writing its own object deconstruction method

Talk a little more about toRefs usage scenarios

When we do this, we have to get state. In the template, which is not very friendly and a bit troublesome. I want to use it directly in the template, at this time we use toRefs

So we can use it directly in the template

If you feel that you have gained something, please use your little hands to save, thank you! How to predict the future, and listen to the next time to break down ~