vue3中＜script?setup＞和setup函數的區別是什么

這篇“vue3中＜script setup＞和setup函數的區別是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue3中＜script setup＞和setup函數的區別是什么”文章吧。

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

• 更少的樣板內容，更簡潔的代碼。

• 能夠使用純 TypeScript 聲明 props 和自定義事件。

• 更好的運行時性能 (其模板會被編譯成同一作用域內的渲染函數，避免了渲染上下文代理對象)。

• 更好的 IDE 類型推導性能 (減少了語言服務器從代碼中抽取類型的工作)。

以上是vue3官網對<script setup>的說明，其實＜script setup＞ 就是 setup函數的一個語法糖。

一、基本語法

setup函數的寫法

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

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

在＜script setup＞語法糖的寫法

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

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

二、使用外部文件區別

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函數中定義成一個方法才能正常使用。

＜script 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>

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

三、注冊組件

setup函數

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

＜script setup＞語法糖

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

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

四、使用自定義指令

setup函數

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

＜script setup＞語法糖

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

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

五、父傳子數據通信

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

setup函數

<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>

六、子傳父數據通信

setup函數

<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> 中使用的編譯器宏。他們不需要導入，且會隨著 <script setup> 的處理過程一同被編譯掉。

defineProps 接收與 props 選項相同的值，defineEmits 接收與 emits 選項相同的值。

defineProps 和 defineEmits 在選項傳入后，會提供恰當的類型推導。

傳入到 defineProps 和 defineEmits 的選項會從 setup 中提升到模塊的作用域。因此，傳入的選項不能引用在 setup 作用域中聲明的局部變量。這樣做會引起編譯錯誤。但是，它可以引用導入的綁定，因為它們也在模塊作用域內。

七、defineExpose和expose

使用setup函數定義的組件的expose是默認開啟的，會將函數內定義的實例變量、方法全部暴露出去。而使用＜script setup＞的組件是默認關閉的&mdash;&mdash;即通過模板引用或者 $parent 鏈獲取到的組件的公開實例，不會暴露任何在 <script setup> 中聲明的綁定。

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

使用了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> 在有這些需要的情況下或許會被使用到：

• 聲明無法在 <script setup> 中聲明的選項，例如 inheritAttrs 或插件的自定義選項。

• 聲明模塊的具名導出 (named exports)。

• 運行只需要在模塊作用域執行一次的副作用，或是創建單例對象

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

九、頂層的 await

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

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

另外，await 的表達式會自動編譯成在 await 之后保留當前組件實例上下文的格式。

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

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

以上就是關于“vue3中＜script setup＞和setup函數的區別是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。