Vue3 のセットアップ関数 (エントリ ポイント) の簡単な分析

Composition Api
セットアップ関数は、新しいコンポーネント オプションです。コンポーネント内で複合 API を使用するためのエントリ ポイントとして機能します。
呼び出しのタイミング:
setup 関数は beforeCreate フックの前に呼び出されます
戻り値
setup がオブジェクトを返す場合、コンポーネント テンプレートでオブジェクトのプロパティにアクセスできます
パラメーター
2 つのパラメータを受信します

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

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

[関連する推奨事項:

vue.js ビデオ チュートリアル]

以上がVue3 のセットアップ関数 (エントリ ポイント) の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。