Une brève analyse de la fonction de configuration (point d'entrée) de Vue3

La fonction de configuration

Composition Api
est une nouvelle option de composant. Sert de point d’entrée pour utiliser l’API Composition dans un composant.
Timing d'appel :
La fonction setup sera appelée avant le hook beforeCreate
Valeur de retour
Si setup renvoie un objet, les propriétés de l'objet sont accessibles dans le modèle du composant
Paramètres
Reçoit deux paramètres

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>

Paramètres de réception :

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

【Recommandations associées : tutoriel vidéo vue.js】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!