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：
propsattrsslotsemit
let me put it another way , you Will not be accessible The following component options ：
datacomputedmethods
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 .