Shulou(Shulou.com)06/02 Report--

This article introduces setup+ref+reactive how to achieve vue3 responsive function, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Setup is used to write combinatorial api, and internal data and methods need to go through return before templates can be used. In the previous vue2, the data returned by data can be directly used for two-way binding. If we bind the data types in setup directly, we find that the variables cannot respond in real time. Let's take a look at how setup implements the responsive functionality of data.

First, the custom attributes in refsetup do not have responsive capabilities, so ref is introduced. The underlying layer of ref wraps the attribute values into a proxy through proxies, and the proxy is an object, which makes the basic type of data have responsive capabilities, which must be introduced before use.

Sample 1:ref uses the

{{mood}} import {ref} from "vue" export default {setup () {let mood = ref ("I'm in a bad mood right now!") SetTimeout (() = > {mood.value = "feeling as beautiful as a human being"}, 3000) return {mood}} at this time, you can edit mood arbitrarily in the setup template to ensure real-time response. The instance adds value to the value of mood because the work of ref turns out to be:

Let mood = ref ("I'm in a bad mood right now!")

Modify it to: let mood = proxy ({value: "I'm in a bad mood right now!" })

Second, reactive the above ref makes the underlying data type responsive, but if we replace it with data of reference type, it will be invalidated. So reactive is introduced.

Reactive wraps reference type data into proxy through the underlying wrapper, using principles such as:

Let me = reactive ({single:true, want: "warm as a furnace"}) / / the running result is let me = proxy: {single:true, want: "warm as a furnace"} when quoted, just use me.want directly.

Sample 2:reactive uses the

Third, toRefs, toRef application setup + ref + reactive to achieve the data response, can not be deconstructed by ES6, will eliminate the response characteristics. So you need to deconstruct toRefs, and when you use it, you need to introduce it first.

How it works is as follows:

Import {ref, reactive, toRefs} from "vue" let me = reactive ({single:true, want: "warm as a furnace"}) / / run as let me = proxy: {single:true, want: "warm as a furnace"} const {single, want} = toRefs (me) / / run as single: proxy ({value:true}) want: proxy ({value: "warm as a furnace"}) toRefs dissolves single and want into two proxy So it's responsive.

Example 3:toRefs deconstructs data

It is more difficult to understand, you can print to see the results are easier to understand.

Let me = reactive ({single:true, want: "warm as a stove"}) let lv = toRef (me, 'love') console.log (' love',love); / / print the result ObjectRefImpl {_ _ v_isRef: true _ key: "love" _ object: Proxy {single:true, want: "warm as a stove"} value: undefined [[Prototype]]: Object}

ToRef is the value passed between components, and the optional parameters are processed. At runtime, first check whether love exists in me, if it does, inherit the love in me, create a love if it does not exist, and then deconstruct the assignment to the variable lv.

Sample 4:toRef uses the

Return {single, want}} ref makes the underlying data types responsive, while reactive makes data of reference types responsive. Setup + ref + reactive fully implements the data responsive function in vue2.

ToRefs deconstructs the data wrapped by reactive, and toRef is used for optional parameters.

On how setup+ref+reactive to achieve vue3 responsive function to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.