This is the 21st day of my participation in the August Text Challenge.More challenges in August

In this article we will look at the use of the responsive base API and what we need to be aware of.

How to use

reactive

Reactive lets us get a reactive copy of an object, and reactive transformation is “deep” — it affects all nested properties. In an ES2015 Proxy-based implementation, the returned Proxy is not equal to the original object. Use as follows:

setup: () = > {
    const obj = reactive({ count: 0 })
    return { obj }
}
Copy the code

This allows us to use obj.count just like Vue2, but it also serves another purpose: encapsulating all deep refs while maintaining refs responsiveness.

The sample

const count = ref(1)
const obj = reactive({ count })
Copy the code

In the example above, not only is ref unpacked, that is, obj.count===count.value, but when obj.count or count.value changes, the other one also changes.

Note that when a ref is assigned to a Reactive property, the ref is automatically unpacked as follows:

const count = ref(1)
const obj = reactive({})
obj.count = count
Copy the code

The results here are the same as in the example above.

readonly

A read-only proxy that accepts an object (reactive or pure) or ref and returns the original object. Any nested property accessed is also read-only, as follows:

const obj = reactive({ count: 0 })
const copyObj=readonly(obj)
Copy the code

When we let obj.count++ change, the value of copyobj.count also changes, but when we let copyobj.count ++ change, the following warning appears:

Set operation on key "count" failed: target is readonly. 
Copy the code

This means that we can use readonly to copy data that is read-only and cannot be written. This is useful in projects where we can only use the data in a certain place but cannot change it.

isProxy

Check whether the object is a proxy created by Reactive or Readonly by:

isProxy(obj)  //true
isProxy(copyObj)  //true

const title=ref('hello world')
isProxy(title)  //false
Copy the code

isReactive

Check whether the object is a reactive proxy created by Reactive or a read-only proxy created by readonly.

isReactive(obj)  //true
isReactive(copyObj)  //true
isReactive(title)  //false
Copy the code

isReadonly

With the use of the two is[XXX] methods above, we can see that this method checks whether the object is a read-only proxy created by readOnly, as follows:

isReadonly(obj)  //false
isReadonly(copyObj)  //true
Copy the code

toRaw

Returns the original object of the Reactive or Readonly agent. To obtain the most original data value, deproxy is used as follows:

toRaw(obj)
//{count: 0}
Copy the code

{count: 0}} {count: 0}} {count: 0}}

markRaw

Mark an object so that it will never be converted to proxy and will always be itself. Suppose we mark an object as follows:

const foo = markRaw({})
Copy the code

If you use isProxy, isReactive, and isReadonly, the result will be false. If you use isProxy, isReactive, and isReadonly, the result will be false.

In case you haven’t noticed, sometimes in a project we don’t need the reactive data, just the use of the call, and then we can mark the data with markRaw.

shallowReactive

Create a reactive proxy that tracks the responsiveness of its own property, but does not perform deep, or shallow, transformations of nested objects. It also differs from Reactive in that any property that uses ref is not automatically unpacked by the agent.

Suppose we define a variable as follows:

setup() {
    const title = ref('hello world')
    const obj = shallowReactive({
        count: 0.a: {
            b: 1
        },
        title: title
    })
    return {
        obj
    }
}
Copy the code

In the code above, obj.count is still responsive, but obj.a.b is not, and if it changes, the view does not change. Also, obj.title is not automatically unpacked, so we’ll use it like this:

<h1>{{obj.title.value}}</h1>
Copy the code

Otherwise you can’t parse it out.

shallowReadonly

Create a proxy that makes its own property read-only but does not perform deep read-only conversion of nested objects. ShallowReactive is also different from readonly. Any property that uses ref is not unpacked automatically by the proxy, but is used in the same way:

If we change obj.count++, we will get a warning, but if we change obj.a.b++, we will not get an error and will work, although obj.a.b is still not responsive.

conclusion

1. Reactive, ReadOnly, and markRaw are the three most commonly used apis. It is important to note that when our data is not needed, we can use markRaw to mark data.

2. We’re going to use these apis when we’re processing data or making judgments about data, and we’re going to use them as we see fit.

For more articles, the portal has opened: Look back at the Vue3 catalogue!