溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“vue3中＜script setup＞和setup函數的區別是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue3中＜script setup＞和setup函數的區別是什么”文章吧。
<script setup> 是在單文件組件 (SFC) 中使用組合式 API 的編譯時語法糖。當同時使用 SFC 與組合式 API 時該語法是默認推薦。相比于普通的 <script> 語法，它具有更多優勢：
更少的樣板內容，更簡潔的代碼。
能夠使用純 TypeScript 聲明 props 和自定義事件。
更好的運行時性能 (其模板會被編譯成同一作用域內的渲染函數，避免了渲染上下文代理對象)。
更好的 IDE 類型推導性能 (減少了語言服務器從代碼中抽取類型的工作)。
以上是vue3官網對<script setup>的說明，其實＜script setup＞ 就是 setup函數的一個語法糖。
<script>
import { ref } from 'vue'
export default {
setup () {
const num = ref(1);
return { num }
}
}
</script>setup函數的寫法中定義的變量和函數都需要return出來，不然無法正常使用。
<script setup>
import { ref } from 'vue'
const num = ref(1)
</script>在＜script setup＞語法糖中的定義的變量和函數無需return。里面的代碼會被編譯成組件 setup() 函數的內容。這意味著與普通的 <script> 只在組件被首次引入的時候執行一次不同，<script 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>在＜script setup＞語法糖中無需再定義成一個方法，可以直接使用 。
<script>
import Hello from '@/components/HelloWorld'
export default {
components: {
Hello
}
}
</script><script setup> import Hello from '@/components/HelloWorld' </script>
不需要在component 中注冊了，可以直接使用。
<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> 中不需要顯式注冊，但他們必須遵循 vNameOfDirective 這樣的命名規范
<Com :num="100"></Com>
<script>
export default {
props: {
num: {
type: Number,
default: 1
}
},
setup (props) {
console.log(props)
}
}
</script><script setup>
import { defineProps } from 'vue'
const props = defineProps({
num: {
type: Number,
default: 1
}
})
</script><script>
export default {
setup (props, context) {
const sendNum = () => {
context.emit('sendNum', 200)
}
return { sendNum }
}
}
</script><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 作用域中聲明的局部變量。這樣做會引起編譯錯誤。但是，它可以引用導入的綁定，因為它們也在模塊作用域內。
使用setup函數定義的組件的expose是默認開啟的，會將函數內定義的實例變量、方法全部暴露出去。而使用＜script setup＞的組件是默認關閉的——即通過模板引用或者 $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 setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有這些需要的情況下或許會被使用到：
聲明無法在 <script setup> 中聲明的選項，例如 inheritAttrs 或插件的自定義選項。
聲明模塊的具名導出 (named exports)。
運行只需要在模塊作用域執行一次的副作用，或是創建單例對象
<script>
// 普通 <script>, 在模塊作用域下執行 (僅一次)
runSideEffectOnce()
// 聲明額外的選項
export default {
name:'header',
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中執行 (對每個實例皆如此)
</script><script setup> 中可以使用頂層 await。結果代碼會被編譯成 async setup()
<script setup>
const post = await fetch('https://api.com').then((r) => r.json())
</script>另外，await 的表達式會自動編譯成在 await 之后保留當前組件實例上下文的格式。
由于模塊執行語義的差異，<script setup> 中的代碼依賴單文件組件的上下文。當將其移動到外部的 .js 或者 .ts 文件中的時候，對于開發者和工具來說都會感到混亂。因此，<script setup> 不能和 src attribute 一起使用。
以上就是關于“vue3中＜script setup＞和setup函數的區別是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
