1. Kick off setup

1. Understanding: vue3 A new configuration item in 0. The value is a function.

2. setup is the "stage of performance" of all Composition API s.

3. The data and methods used in the component should be configured in the setup.

4. There are two return values of the setup function:

   1. If an object is returned, the properties and methods in the object can be used directly in the template. (focus!)

   2. If you return a rendering function: you can customize the rendering content. (understand)

5. Note:

1. Try not to contact vue2 X configuration mix

   • Vue2.x configuration (data, metals, computed...) You can access the properties and methods in setup.

   • However, vue2.0 cannot be accessed in setup X configuration (data, metrics, computed...).

   • If there are duplicate names, setup takes precedence.

2. setup cannot be an async function, because the return value is no longer the return object, but Promise. The template cannot see the attributes in the return object. (you can also return a Promise instance later, but you need the cooperation of suspend and asynchronous components)

 1 <template>
 2   <h1>A person's information</h1>  
 3   <h1>full name:{{name}}</h1>  
 4   <h1>Age:{{age}}</h1>  
 5   <h1>Type of work:{{job.type}}</h1>  
 6   <h1>Salary:{{job.salary}}</h1>  
 7   <button @click="changeInfo">Modify personal information</button>
 8 </template>
 9 
10 <script>
11 import {ref} from 'vue'
12 export default {
13   name: 'App',
14   setup(){
15     let name = ref("Zhang San")
16     let age = ref(18)
17     let job = ref({
18       type: 'Front end Engineer',
19       salary: '30k'
20     })
21 
22     function changeInfo() {
23       name.value = 'Li Si'
24       age.value = 48
25       job.value.type = 'UI designer'
26       job.value.salary = '35k'
27     }
28     return {
29       name,
30       age,
31       job,
32       changeInfo
33     }
34   }
35 }
36 </script>

2.ref function

• Function: define a responsive data

• Syntax: const xxx = ref(initValue)

  • Create a reference object (ref object for short) containing responsive data.

  • Operation data in JS: XXX value

  • Read data from template: not required value, direct: < div > {{XXX}} < / div >

• remarks:

  • The received data can be basic type or object type.

  • Basic type of data: the response type still depends on object get and set of defineproperty() are completed.

  • Data of object type: internal "help" vue3 A new function in 0 - reactive function.

3.reactive function

• Function: define the responsive data of an object type (do not use it for basic types, but use ref function)

• Syntax: const proxy object = reactive (source object) receives an object (or array) and returns a proxy object (proxy instance object, proxy object for short)

• reactive defines responsive data as "deep-seated".

• The internal Proxy implementation based on ES6 operates the internal data of the source object through the Proxy object.

 1 <template>
 2   <h1>A person's information</h1>  
 3   <h1>full name:{{name}}</h1>  
 4   <h1>Age:{{age}}</h1>  
 5   <h1>Type of work:{{job.type}}</h1>  
 6   <h1>Salary:{{job.salary}}</h1>  
 7   <button @click="changeInfo">Modify personal information</button>
 8 </template>
 9 
10 <script>
11 import {ref, reactive} from 'vue'
12 export default {
13   name: 'App',
14   setup(){
15     let name = ref("Zhang San")
16     let age = ref(18)
17     let job = reactive({
18       type: 'Front end Engineer',
19       salary: '30k'
20     })
21 
22     function changeInfo() {
23       name.value = 'Li Si'
24       age.value = 48
25       job.type = 'UI designer'
26       job.salary = '35k'
27     }
28     return {
29       name,
30       age,
31       job,
32       changeInfo
33     }
34   }
35 }
36 </script>