A brief analysis of the setup function (entry point) of Vue3

Composition Api
The setup function is a new component option. Serves as the entry point for using the Composition API within a component.
Calling timing:
The setup function will be called before the beforeCreate hook
Return value
If setup returns an object, the properties of the object can be accessed in the component template
Parameters
Receive two parameters

setup.vue

<template>
	<div>
		setup
	</div>
</template>
 
<script>
	export default{
		setup(){
			console.log('setup.....')
		},
		beforeCreate() {
			console.log('beforeCreate...')
		},
	}
</script>
 
<style>
</style>

app.vue

 <template>
	<comp-setup>
		
	</comp-setup>
</template>
 
<script>
/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
import CompSetup from './components/setupview'
export default {
  name: 'App',
  components: {
	  CompSetup,
  }
}
</script>
 
<style>
 
</style>

##Receive parameters:

setup.vue

<template>
	<div>
		{{ name }}
		<p>{{ user.username }}</p>
	</div>
</template>
 
<script>
	export default{
		//setup不能访问this
		//可以接收参数
		setup(props,context){
			// console.log('setup.....')
			//这种返回的数据不具有响应式
			// let name='tom'
			// return {
			// 	name,
			// }
			return {
				name:'tom',
				user:{
					username:'admin',
					password:'123'
				}
			}
		},
		beforeCreate() {
			// console.log('beforeCreate...')
		},
		props:{
			msg:String
		}
	}
</script>
 
<style>
</style>

app.vue

<template>
	<comp-setup msg="welcome">
		
	</comp-setup>
</template>

<script>
/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
import CompSetup from './components/setupview'
export default {
  name: 'App',
  components: {
	  CompSetup,
  }
}
</script>

<style>

</style>

[Related recommendations:

vue.js video tutorial]

The above is the detailed content of A brief analysis of the setup function (entry point) of Vue3. For more information, please follow other related articles on the PHP Chinese website!