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.