setup

This is what vUE provides for the composite API. All the logic in vUE is executed before the component is created, i.e. before beforeCreate and created, so there are cases where this pointer is null, and data and methods cannot be used.

<template> <div> This is my vue exercise manual </div> </template> <script lang="ts"> import {defineComponent} from 'vue' export default DefineComponent ({data () {return {name: 'young young'}}, setup () {console.log(' Hello Vue! I've infiltrated setup. ') console.log(this) } }) </script>Copy the code

// Result:

Setup takes two parameters: props, context. Setup can only access props, attrs, slots, and emit properties.

  • Props are all properties that the parent component passes to the child component and that the quilt component has received through props
  • Attrs is an attribute other than that received by the child component with props
  • Slots is all the objects that come in through slots
  • Emit is used to distribute functions

Setup return value: Generally, it is returned as an object with properties and methods that can be used directly in the template

// Parent <template> <div> <Setupcomponent :name=' myName ':num='giveChildNum' @Changenum ='changeNumFun'> <template v-slot:header> <div>header</div> </template> <template v-slot:content> <div>content</div> </template> </Setupcomponent> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import Setupcomponent from './setup.vue' export default defineComponent({ components: { Setupcomponent }, data () { return { myname: }}, setup () {const giveChildNum = ref(1) // ref(1) Const changeNumFun = () => {giveChildNum. Value = 2} return {giveChildNum, ChangeNumFun}}}) </script> // subcomponent <template> <h3> I am subcomponent </h3> <! -- Base value, Props, attrs, emit --> <div>{{attrsName}}</div> <div>{{num}}</div> < button@click ="handleNumClick">num+1</button> <! -- slot slot --> <slot name="header"></slot> <slot name="content"></slot> </template> <script lang="ts"> import { defineComponent, h } from 'vue' export default defineComponent({ props: { num: Number }, setup (props, { attrs, slots, Emit}) {console.log(props) console.log(attrs) console.log(emit) // Base attribute const attrsName = attrs.name const HandleNumClick = () => {emit('changenum')} // slot const {header, content, footer} = slots h('div', [h('header', header), h('div', content), h('footer', footer)]) return { attrsName, handleNumClick } } }) </script>Copy the code

Console printing:

Page display:

Lifecycle hook

The comparison chart on the official website is simple and clear:

Here I will simply write two new hooks to show that if you want to execute logic, you can write them in the corresponding hooks:

import { defineComponent, h, inject, onMounted, onRenderTriggered, onRenderTracked, getCurrentInstance } from 'vue' setup () { onMounted(() => console.log('onMounted')); OnRenderTriggered ((event) => console.log('onRenderTriggered, is triggered, does not track every value, gives you the information to change the value, and every new and old value is explicitly displayed ', event)); OnRenderTracked ((event) => console.log('onRenderTracked 'is state tracking, everything that is returned from setup is tracked. Updates to the page are tracked whenever they occur, and an Event object is generated. ', event)); }Copy the code

Provide / Inject

// Parent <template> <div> <h2> This is my vue exercise manual </h2> <Setupcomponent /> </div> </template> <script lang="ts"> import { defineComponent, ref, provide } from 'vue' import Setupcomponent from './setup.vue' export default defineComponent({ components: { Setupcomponent }, Setup () {const intro = ref(' l ') const changeintro = () => {debugger intro = 'l'} provide(' l ', intro) provide('changeintro', changeintro) return { giveChildNum, ChangeNumFun}}) </script> // subcomponent <template> <h3> I am a subcomponent </h3> <div>{{injectVal}}</div> <button @click="handleInjectClick"> Inject button </button> </template> <script lang="ts"> import {defineComponent, inject } from 'vue' export default defineComponent({ setup () { // inject const injectVal = inject('intro') const handleInjectClick = inject('changeintro') return { injectVal, handleInjectClick } } }) </script>Copy the code

Operation process:

getCurrentInstance

The getCurrentInstance method is used to obtain vUE instances, which is recommended for advanced usage and library development

import { defineComponent, h, inject, onMounted, onRenderTriggered, onRenderTracked, getCurrentInstance } from 'vue'
setup () {
    const getCurrentInstanceVal = getCurrentInstance()
    console.log(getCurrentInstanceVal)
}
Copy the code

GetCurrentInstanceVal is:

Content in CTX:

Content of proxy:

You can see that the content is similar, except that the latter wraps a layer of proxy.

Syntactic sugar

This is based on the above code example, write a simplified version of the subcomponent script tag directly added to the setup attribute, can save the export part of the code, the attributes and methods defined in the setup can be used directly, clear and concise.

Num}}</div> < button@click ="handleNumClick">num+1</button> </template>  <script lang="ts" setup> import { defineEmit, defineProps } from 'vue' const propsVal = defineProps({ name: String, num: Number }) const emit = defineEmit(['changenum']) const handleNumClick = () => { emit('changenum') } </script>Copy the code