<script setup> 是在單文件組件 (SFC) 中使用組合式 API 的編譯時(shí)語法糖。當(dāng)同時(shí)使用 SFC 與組合式 API 時(shí)該語法是默認(rèn)推薦。相比于普通的 <script> 語法，它具有更多優(yōu)勢(shì)：

• 更少的樣板內(nèi)容，更簡(jiǎn)潔的代碼。
• 能夠使用純 TypeScript 聲明 props 和自定義事件。
• 更好的運(yùn)行時(shí)性能 (其模板會(huì)被編譯成同一作用域內(nèi)的渲染函數(shù)，避免了渲染上下文代理對(duì)象)。
• 更好的 IDE 類型推導(dǎo)性能 (減少了語言服務(wù)器從代碼中抽取類型的工作)。

以上是vue3官網(wǎng)對(duì)<script setup>的說明，其實(shí)＜script setup＞ 就是 setup函數(shù)的一個(gè)語法糖。

一、基本語法

setup函數(shù)的寫法

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

setup函數(shù)的寫法中定義的變量和函數(shù)都需要return出來，不然無法正常使用。

在＜script setup＞語法糖的寫法

<script setup>
    import { ref } from 'vue'
    const num = ref(1)
</script>

在＜script setup＞語法糖中的定義的變量和函數(shù)無需return。里面的代碼會(huì)被編譯成組件 setup() 函數(shù)的內(nèi)容。這意味著與普通的 <script> 只在組件被首次引入的時(shí)候執(zhí)行一次不同，<script setup> 中的代碼會(huì)在每次組件實(shí)例被創(chuàng)建的時(shí)候執(zhí)行。 

二、使用外部文件區(qū)別

setup函數(shù)

<template>
  <div>
    <h2> {{test(name)}}</h2>
  </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函數(shù)使用外部文件時(shí)需要在setup函數(shù)中定義成一個(gè)方法才能正常使用。

＜script setup＞語法糖

<template>
  <div>
    <h2>{{ test(name) }}</h2>
  </div>
</template>
<script setup>
import { test } from '@/utils/test.js'
import { ref } from 'vue'
const name = ref('huang')
</script>

在＜script setup＞語法糖中無需再定義成一個(gè)方法，可以直接使用 。

三、注冊(cè)組件

setup函數(shù)

<script>
import Hello from '@/components/HelloWorld'
export default {
  components: {
    Hello
  }
}
</script>

＜script setup＞語法糖

<script setup>
import Hello from '@/components/HelloWorld'
</script>

不需要在component 中注冊(cè)了，可以直接使用。

四、使用自定義指令

setup函數(shù)

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

＜script setup＞語法糖

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

全局注冊(cè)的自定義指令將正常工作。本地的自定義指令在 <script setup> 中不需要顯式注冊(cè)，但他們必須遵循 vNameOfDirective 這樣的命名規(guī)范

五、父?jìng)髯訑?shù)據(jù)通信

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

setup函數(shù)

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

＜script setup＞語法糖

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

六、子傳父數(shù)據(jù)通信

setup函數(shù)

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

＜script setup＞語法糖

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

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的編譯器宏。他們不需要導(dǎo)入，且會(huì)隨著 <script setup> 的處理過程一同被編譯掉。

defineProps 接收與 props 選項(xiàng)相同的值，defineEmits 接收與 emits 選項(xiàng)相同的值。

defineProps 和 defineEmits 在選項(xiàng)傳入后，會(huì)提供恰當(dāng)?shù)念愋屯茖?dǎo)。

傳入到 defineProps 和 defineEmits 的選項(xiàng)會(huì)從 setup 中提升到模塊的作用域。因此，傳入的選項(xiàng)不能引用在 setup 作用域中聲明的局部變量。這樣做會(huì)引起編譯錯(cuò)誤。但是，它可以引用導(dǎo)入的綁定，因?yàn)樗鼈円苍谀K作用域內(nèi)。

七、defineExpose和expose

使用setup函數(shù)定義的組件的expose是默認(rèn)開啟的，會(huì)將函數(shù)內(nèi)定義的實(shí)例變量、方法全部暴露出去。而使用＜script setup＞的組件是默認(rèn)關(guān)閉的——即通過模板引用或者 $parent 鏈獲取到的組件的公開實(shí)例，不會(huì)暴露任何在 <script setup> 中聲明的綁定。

可以通過 defineExpose 編譯器宏來顯式指定在 <script setup> 組件中要暴露出去的屬性，若不使用 defineExpose 則獲取不到當(dāng)前引用的組件實(shí)例變量、方法。

使用了defineExpose

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

 不使用defineExpose

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

八、與普通的<script> 一起使用

<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有這些需要的情況下或許會(huì)被使用到：

• 聲明無法在 <script setup> 中聲明的選項(xiàng)，例如 inheritAttrs 或插件的自定義選項(xiàng)。
• 聲明模塊的具名導(dǎo)出 (named exports)。
• 運(yùn)行只需要在模塊作用域執(zhí)行一次的副作用，或是創(chuàng)建單例對(duì)象

<script>
// 普通 <script>, 在模塊作用域下執(zhí)行 (僅一次)
runSideEffectOnce()
// 聲明額外的選項(xiàng)
export default {
  name:'header',
  inheritAttrs: false,
  customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中執(zhí)行 (對(duì)每個(gè)實(shí)例皆如此)
</script>

九、頂層的 await

<script setup> 中可以使用頂層 await。結(jié)果代碼會(huì)被編譯成 async setup()

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

另外，await 的表達(dá)式會(huì)自動(dòng)編譯成在 await 之后保留當(dāng)前組件實(shí)例上下文的格式。

 十、限制<script setup> 使用src屬性

由于模塊執(zhí)行語義的差異，<script setup> 中的代碼依賴單文件組件的上下文。當(dāng)將其移動(dòng)到外部的 .js 或者 .ts 文件中的時(shí)候，對(duì)于開發(fā)者和工具來說都會(huì)感到混亂。因此，<script setup> 不能和 src attribute 一起使用。

到此這篇關(guān)于vue3中＜script setup＞ 和 setup函數(shù)的區(qū)別的文章就介紹到這了,更多相關(guān)vue3＜script setup＞ 和 setup函數(shù)區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論