Interested people can pay attention to my official account 《 Life code 》
You can also subscribe to my CSDN special column
Vue 3 Introduction to the Basics Series
setup
setup Function can be said to be Vue 3 An entry function .
Parameters
Use setup
Function time , It will take two parameters :
- props
- context
Let's take a closer look at how to use each parameter .
Props
setup
The first parameter in the function is props
. As expected in a standard component ,setup
Function props
It's reactive , When a new prop when , It will be updated . We are still src/TemplateM.vue
:
`<template>
<div class="template-m-wrap">
counter ---> {{ counter }}
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'TemplateM',
props: {
test: {
type: Object,
default: () => {
return {
name: 'haha',
}
},
},
},
setup(props) {
const counter = ref(0)
console.log('props===>', props)
return {
counter,
}
},
})
</script>
`
however , because props
It's reactive , you Out of commission ES6 deconstruction , Because it will eliminate prop Responsiveness .
We can try to make props
Conduct ES6
deconstruction , See what happens :
`<template>
<div class="template-m-wrap">
counter ---> {{ counter }}
<br/>
test.name ---> {{ test.name }}
<br/>
name ---> {{ name }}
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'TemplateM',
props: {
test: {
type: Object,
default: () => {
return {
name: 'haha',
}
},
},
},
setup(props) {
const counter = ref(0)
console.log('props===>', props)
const {name} = props.test
return {
counter,
name
}
},
})
</script>
`
We saw that the console started to alert :
If you need to deconstruct prop, By using setup
Function toRefs
To do this safely .
`<template>
<div class="template-m-wrap">
counter ---> {{ counter }}
<br/>
test.name ---> {{ test.name }}
<br/>
name ---> {{ name }}
</div>
</template>
<script>
import { defineComponent, ref, toRefs } from 'vue'
export default defineComponent({
name: 'TemplateM',
props: {
test: {
type: Object,
default: () => {
return {
name: 'haha',
}
},
},
},
setup(props) {
const counter = ref(0)
console.log('props===>', props)
const {name} = toRefs(props.test)
return {
counter,
name
}
},
})
</script>
`
This time we can see the following results :
Context
Pass to setup
The second parameter to the function is context
.context
It's a common JavaScript object , It exposes three components of property:
`<template>
<div class="template-m-wrap">
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'TemplateM',
props: {
test: {
type: Object,
default: () => {
return {
name: 'haha',
}
},
},
},
setup(props, context) {
console.log('props===>', props, context)
return {
}
},
})
</script>
`
We can see that the effect is as follows :
context
It's a common JavaScript object , in other words , It's not reactive , This means that you can safely deal with context
Use ES6 deconstruction .
`setup(props, { attrs, slots, emit }) {
...
}
`
Be careful
attrs
and slots
It's a state object , They are always updated as the component itself updates . This means that you should avoid deconstructing them , And always with attrs.x
or slots.x
Method reference of property. Please note that , And props
Different ,attrs
and slots
yes Not Responsive . If you're going to base it on attrs
or slots
Change application side effects , Then it should be in onUpdated
Do this in the lifecycle hook .
Access component's property
perform setup
when , The component instance has not been created . therefore , You can only access the following property:
props
attrs
slots
emit
let me put it another way , you Will not be accessible The following component options :
data
computed
methods
Use with templates
If setup
Return an object , In the template of the component, it can be passed to setup
Of props
property Access the object as well property:
`<template>
<div class="template-m-wrap" title="hhhhh">
<div>{{ readersNumber }} {{ book.title }}</div>
</div>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
name: 'TemplateM',
setup() {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// expose to template
return {
readersNumber,
book,
}
},
})
</script>
`
We can see that the effect is as follows :
Be careful , from setup
Back to refs When accessing in a template, it is Automatically untied Of , So... Should not be used in templates .value
.
Using render functions
setup
You can also return a render function , This function can directly use responsive states declared in the same scope :
`<template>
<div class="template-m-wrap" title="hhhhh">
</div>
</template>
<script>
import { defineComponent, ref, reactive, h } from 'vue'
export default defineComponent({
name: 'TemplateM',
setup() {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// expose to template
return () => h('div', [readersNumber.value, book.title])
},
})
</script>
`
The effect is as follows :
Use this
stay setup()
Inside ,this
It will not be a reference to the active instance , because setup()
Is called before parsing other component options , therefore setup()
Inside this
The behavior of and other options for this
Completely different . This is with other options API Use it together setup()
May lead to confusion .