ホームページ >ウェブフロントエンド >Vue.js >
1. 基本構文
setup 関数の書き方
<script>
import { ref } from 'vue'
export default {
setup () {
const num = ref(1);
return { num }
}
}
</script>setup 関数で定義した変数や関数は返さないと正常に使用できません。
のシンタックス シュガーの書き方
<script setup>
import { ref } from 'vue'
const num = ref(1)
</script> のシンタックス シュガーで定義された変数や関数は返す必要はありません。内部のコードは、コンポーネント setup() 関数のコンテンツにコンパイルされます。これは、コンポーネントが最初に導入されるときに 1 回だけ実行される通常の <script></script> とは異なり、<script setup></script> のコードは、コンポーネント インスタンスが導入されるたびに実行されることを意味します。作成されました。実行する時間です。
2. 外部ファイルを使用する場合の違い
setup 関数
<template>
<div>
<h3> {{test(name)}}</h3>
</div>
</template>
<script>
import { ref } from 'vue'
import { test } from '@/utils/test.js'
export default {
setup () {
const name = ref('huang')
const testName = test
return { name, testName }
}
}
</script>setup 関数 外部ファイルを使用する場合、setup 関数内でメソッドとして定義して使用する必要があります。通常は。
＜スクリプト設定＞構文シュガー
<template>
<div>
<h3>{{ test(name) }}</h3>
</div>
</template>
<script setup>
import { test } from '@/utils/test.js'
import { ref } from 'vue'
const name = ref('huang')
</script>構文シュガー内でメソッドとして定義する必要はなく、そのまま使用できます。
3. コンポーネントの登録
関数のセットアップ
<script>
import Hello from '@/components/HelloWorld'
export default {
components: {
Hello
}
}
</script>構文sugar
<script setup> import Hello from '@/components/HelloWorld' </script>
コンポーネントに登録する必要はなく、直接使用できます。 。
4. カスタム命令を使用する
setup function
<template>
<h2 v-onceClick>使用了setup函数</h2>
</template>
<script>
export default {
directives: {
onceClick: {
mounted (el, binding, vnode) {
console.log(el)
}
}
},
}
</script><template>
<h2 v-my-Directive>使用了script setup</h2>
</template>
<script setup>
const vMyDirective = {
beforeMount: (el) => {
console.log(el)
}
}
</script>グローバルに登録されたカスタム命令は正常に動作します。ローカル カスタム命令は、<script setup></script> に明示的に登録する必要はありませんが、vNameOfDirective