<script setup></script> ialah gula sintaktik masa kompilasi untuk menggunakan API gubahan dalam komponen fail tunggal (SFC). Sintaks ini ialah pengesyoran lalai apabila menggunakan SFC dengan API komposisi. Berbanding dengan sintaks <script></script> biasa, ia mempunyai lebih banyak kelebihan:

• Kurang kandungan boilerplate dan kod yang lebih ringkas.

• Keupayaan untuk mengisytiharkan prop dan acara tersuai menggunakan TypeScript tulen.

• Prestasi masa jalan yang lebih baik (templatnya akan disusun menjadi fungsi pemaparan dalam skop yang sama, mengelakkan keperluan untuk memaparkan objek proksi konteks).

• Prestasi inferens jenis IDE yang lebih baik (kurang berfungsi untuk pelayan bahasa mengekstrak jenis daripada kod).

Di atas ialah perihalan daripada laman web rasmi vue3, ialah gula sintaks untuk fungsi persediaan.

1. Sintaks asas

Cara menulis fungsi persediaan

<script>
import { ref } from &#39;vue&#39;
export default {
  setup () {
    const num = ref(1);
    return { num }
  }
}
</script>

Cara menulis fungsi persediaan Pembolehubah dan fungsi yang ditakrifkan dalam fungsi persediaan perlu dikembalikan, jika tidak, ia tidak boleh digunakan secara normal.

Cara menulis gula sintaks dalam

<script setup>
    import { ref } from &#39;vue&#39;
    const num = ref(1)
</script>

Pembolehubah dan fungsi yang ditakrifkan dalam gula sintaks dalam tidak perlu dikembalikan. Kod di dalam akan disusun ke dalam kandungan komponen setup() fungsi. Ini bermakna tidak seperti <script> biasa yang hanya dilaksanakan sekali apabila komponen mula-mula diperkenalkan, kod dalam <script setup> akan dilaksanakan setiap kali tika komponen dibuat.

2. Perbezaan dalam menggunakan fail luaran

fungsi persediaan

<template>
  <div>
    <h3> {{test(name)}}</h3>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import { test } from &#39;@/utils/test.js&#39;
export default {
  setup () {
    const name = ref(&#39;huang&#39;)
    const testName = test 
    return { name, testName }
  }
}
</script>

Apabila fungsi persediaan menggunakan fail luaran, ia perlu ditakrifkan sebagai kaedah dalam fungsi persediaan untuk digunakan ia biasanya.

＜penyediaan skrip＞Gula sintaks

<template>
  <div>
    <h3>{{ test(name) }}</h3>
  </div>
</template>
<script setup>
import { test } from &#39;@/utils/test.js&#39;
import { ref } from &#39;vue&#39;
const name = ref(&#39;huang&#39;)
</script>

Tidak perlu mentakrifkannya sebagai kaedah dalam <script setup> sintaks gula dan boleh digunakan secara terus.

3. Daftar komponen

fungsi persediaan

<script>
import Hello from &#39;@/components/HelloWorld&#39;
export default {
  components: {
    Hello
  }
}
</script>

＜penetapan skrip>gula sintaks

<script setup>
import Hello from &#39;@/components/HelloWorld&#39;
</script>

Tidak perlu mendaftar dalam komponen, anda boleh menggunakannya terus .

4. Gunakan arahan tersuai

fungsi persediaan

<template>
    <h2 v-onceClick>使用了setup函数</h2>
</template>
<script>
export default {
  directives: {
    onceClick: {
      mounted (el, binding, vnode) {
        console.log(el)
      }
    }
  },
}
</script>

＜persediaan skrip> Gula sintaktik

<template>
    <h2 v-my-Directive>使用了script setup</h2>
</template>
<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    console.log(el)
  }
}
</script>

Arahan tersuai yang didaftarkan secara global akan berfungsi seperti biasa. Arahan tersuai tempatan tidak perlu didaftarkan secara eksplisit dalam <script setup>, tetapi ia mesti mengikut konvensyen penamaan vNameOfDirective

5 komunikasi data ibu bapa kepada anak

<Com :num="100"></Com>

fungsi persediaan

<script>
export default {
  props: {
    num: {
      type: Number,
      default: 1
    }
  },
  setup (props) {
    console.log(props)
  }
}
</script>

＜persediaan skrip＞gula sintaksis

<script setup>
import { defineProps } from &#39;vue&#39;
const props = defineProps({
  num: {
    type: Number,
    default: 1
  }
})
</script>

6 Komunikasi data daripada anak kepada ibu bapa

fungsi persediaan

<script>
export default {
  setup (props, context) {
    const sendNum = () => {
      context.emit(&#39;sendNum&#39;, 200)
    }
    return { sendNum }
  }
}
</script>

＜gula persediaan skrip＞Syntax 🎜>

<script setup>
import { defineProps, defineEmits } from &#39;vue&#39;
const emit = defineEmits([&#39;submit&#39;])
const sendNum = () => {
  emit(&#39;submit&#39;, 1000)
}
</script>

Salin selepas log masuk

<script setup>
import { ref } from "vue";
const type = ref("<script setup>语法糖");
const msg = ref("使用了defineExpose");
defineExpose({
  type,
  msg,
});
</script>

<script setup>
import { ref } from "vue";
const type = ref("<script setup>语法糖");
const msg = ref("使用了defineExpose");
</script>

<script>
// 普通 <script>, 在模块作用域下执行 (仅一次)
runSideEffectOnce()
// 声明额外的选项
export default {
  name:&#39;header&#39;,
  inheritAttrs: false,
  customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

<script setup>
const post = await fetch(&#39;https://api.com&#39;).then((r) => r.json())
</script>