The setup of vue3

This function is probably the most critical API of Vue3. The official statement is “our application has come a long way in terms of maintainability and flexibility”. However, as a user, it feels more flexible than before, but there is no fundamental improvement in maintainability

  • There is no reduction in the amount of code, and the methods and logic to write remain the same, just concentrated in one place
  • All the initial logic should be written in one setup function, and the other functions should not be separated from the setup function. , but the maintainability has been reduced
  • The methods defined inside cannot be shared and reused globally, but can only serve the components of this page, as before, there is no substantial difference

However, in the process of using or found some convenient places

  • The initial logic of the page and module can be kept in it and maintained separately from the rest of the code
  • It has the full vUE and the method lifecycle and the method hooks that can fully implement vUE functionality
  • As a child component, the props passes can be used to perform data manipulation at initialization, without needing to use internal computations

Summary of common setup methods

ref

This is the most common method, and if you want to call a variable defined in a DOM binding, or a method in a method, then you have to use this method, otherwise the variable is not reactive

    import { ref} from 'vue'
    <template>
        <div>{{name_1}} /* I changed */ {{name_2[0]}} /* I changed */</div>
    </template>

    setup() {
        const name_1 = ref(' ')
        const name_2 = ref([])
        const name_3 = ref({})  // Error objects cannot use this method to respond


        name_1.value  = 'I've changed.'  // Internally change the value of a variable
        name_2.value[0]  = 'I've changed.'   

        return{
            name_1,
            name_2
        }

    }
Copy the code

toRef,toRefs

This method constructs the object and returns a responsive variable

    import { toRef,toRefs} from 'vue'
    <template>
        <div>
            {{newName_1}}    /* name_1 */
            {{newName_1}} /* name_2 */
        </div>
    </template>

    setup() {
       const obj = reactive({  // Create a responsive object
           name_1:'name_1'.name_2:'name_2'
       })

       const newName_1 = toRef(obj,'name_1')
       const {name_2:newName_2} = toRefs(obj)

       console.log(newName_1.value) // name_1
       console.log(newName_2.value) // name_2

       return {
           newName_1,
           newName_2
       }
    }
Copy the code

GetCurrentInstance method

Although it is officially not recommended to call this inside of a vuex method, you do need to call this when there is a jump route, get a route parameter, get a vuex method… This is a real pain in the neck, so you can use the getCurrentInstance method he provides as follows

    import { getCurrentInstance} from 'vue'
    <template>
        <div>
           
        </div>
    </template>

    setup() {
      const user  = ref('name') 
      const _this = getCurrentInstance() // This method returns classes and methods mounted on vUE
      const {proxy} = _this // Returns the method mounted on this
      const route =  proxy.$root.$route // Get the root routing method
	  const emit =  proxy.$root.$emit // Trigger the parent component method. . .return {
          user
      }

    }
Copy the code

GetCurrentInstance method

Although it is officially not recommended to call this inside of a vuex method, you do need to call this when there is a jump route, get a route parameter, get a vuex method… This is a real pain in the neck, so you can use the getCurrentInstance method he provides as follows

    import { getCurrentInstance} from 'vue'
    <template>
        <div>
           
        </div>
    </template>

    setup() {
      const user  = ref('name') 
      const _this = getCurrentInstance() // This method returns classes and methods mounted on vUE
      const {proxy} = _this // Returns the method mounted on this
      const route =  proxy.$root.$route // Get the root routing method
	  const emit =  proxy.$root.$emit // Trigger the parent component method. . .return {
          user
      }

    }
Copy the code

The Context method

This method is generally used to call the parent component of the method and its own component slot, in fact, the last method is completely contained, here is the official out to see

   export default {
        setup(props, context) {
            // Attribute (non-responsive object, equivalent to $attrs)
            console.log(context.attrs)

            // slots (non-responsive object, equivalent to $slots)
            console.log(context.slots)

            // Trigger event (method, equivalent to $emit)
            console.log(context.emit)

            // Expose public property (function)
            console.log(context.expose)
        }
}
Copy the code

There is also a life cycle, and apis like Watch can also be used, which I won’t go into here