What is the composite API of vue3

Time:2022-5-24

1 abbreviations

Rd: responsive data is the content returned by the data() function in vue2

RF: functions for processing responsive data, which are a bunch of functions defined in methods, watch, computed and other options in vue2.

 

2 vue2 questions

Suppose a Vue component has thousands of lines of code. As follows:

export default {

  data() {

    return {

//A pile of responsive data

a. / / for the function processing data a, please go down 3000 lines

b. / / please process the data of 4000 rows B

c. / / for the function of processing data C, please go down 5000 lines

d. / / for the function processing data D, please go down 6000 lines

    };

  },

 

  created() {

  },

  mounted() {

  },

 

//Line 3000

//The methods option defines a number of functions RF that handle responsive data

  methods: {

//A bunch of functions that handle responsive data a

//A bunch of functions that handle responsive data B

//A bunch of functions that handle responsive data C

//A bunch of functions that handle responsive data d

  },

 

//Line 7000

  watch: {

   

  },

//Line 8000

  computed: {

 

  },

}

 

Vue2’s questions:

The responsive data RD and its processing function RF are described in different paragraphs, separated by thousands of lines. It is very troublesome to compare and observe each other.

3 objectives

The responsive data RD and its processing function RF are described together to facilitate mutual observation and comparison.

 

4 Solutions

The steps are as follows:

S1: declare and define a function named setup.

As soon as the Vue compilation system sees that the function name is setup, it knows that this function integrates the responsive data RD and its processing function RF, so it treats it differently and makes special processing.

 

The contents of the setup function are as follows:

S2: declare and define responsive data

S3: Declaration and definition of responsive data processing function RF

Take S4 as the attribute of RO and RF for short.

S5: the setup function returns ro.

 

Examples are as follows:

export default {

//Declare and define special functions for responsive data RD and its processing function RF

  setup() {

    //———————————————————————  

//Declare and define responsive dataa

    const a = reactive({

      count: 0,

//Calculation properties

      double: computed(() => a.count * 2),

    });

   

//Next, declare and define the processing function of the responsive data a

    function f_a() {

      a.count ++;

    }

 

    //———————————————————————

//Declare and define responsive datab

    const b = reactive({

      count: 0,

//Calculation properties

      double: computed(() => b.count * 2),

    });

   

//Next, the processing function of the responsive data B is declared and defined

    function f_b() {

      b.count ++;

    }

 

//Take the responsive data and its processing function as attributes to construct an object as the return value of the setup function

    return {

      a, f_a,

      b, f_b,      

    };

  },

}

 

5 what is a composite API?

The combined API refers specifically to the setup function.

As soon as you see the function VRD, you will know the name of the function VRD and its response in the system.

“Combination” means that the responsive data RD and its processing function RF are described together for mutual observation and comparison.