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(&#39;setup.....&#39;)
		},
		beforeCreate() {
			console.log(&#39;beforeCreate...&#39;)
		},
	}
</script>
 
<style>
</style>

app.vue

 <template>
	<comp-setup>
		
	</comp-setup>
</template>
 
<script>
/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
import CompSetup from &#39;./components/setupview&#39;
export default {
  name: &#39;App&#39;,
  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(&#39;setup.....&#39;)
			//这种返回的数据不具有响应式
			// let name=&#39;tom&#39;
			// return {
			// 	name,
			// }
			return {
				name:&#39;tom&#39;,
				user:{
					username:&#39;admin&#39;,
					password:&#39;123&#39;
				}
			}
		},
		beforeCreate() {
			// console.log(&#39;beforeCreate...&#39;)
		},
		props:{
			msg:String
		}
	}
</script>
 
<style>
</style>

app.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
	4b1571dad770ec054301ca3f896a9eb4
		
	fa324cb412ea3bc9d296237dd9707ef5
21c97d3a051048b8e55e3c8f199a54b2

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

c9ccee2e6ea535a969eb3f532ad9fe89

531ac245ce3e4fe3d50054a55f265927

[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!