簡析Vue3的setup函數（入口點）

Composition Api
setup函數是一個新的元件選項。作為在元件內使用Composition API的入口點。
呼叫時機：
setup函數會在beforeCreate鉤子之前被呼叫
傳回值
如果setup傳回一個對象，則物件的屬性可以在元件模板中被存取
參數
接收兩個參數

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>

接收參數：

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

<template>
	<comp-setup msg="welcome">
		
	</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>

【相關推薦：vue.js影片教學】

以上是簡析Vue3的setup函數（入口點）的詳細內容。更多資訊請關注PHP中文網其他相關文章！