點燈坊

失くすものさえない今が強くなるチャンスよ

Vue 之 Script Setup

Sam Xiao's Avatar 2024-01-25

從 Vue 3 開始，Vue 經過多次語法演進，到目前 Vue 3.2 所提供的 Script Setup 後，Vue 的寫法總算穩定下來，也是目前 Vue 官網範例的正式寫法，但還是有不少網路上範例或書籍用的是 Vue 3 早期寫法，雖然不再建議這樣寫，但還是得看得懂，並藉此了解 Vue 語法的演變軌跡。

Version

Vue 3.4

Options API

<template>
  <button @click="onClick">+</button>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data: () => ({
    count: 0,
  }),
  methods: {
    onClick() {
      this.count++
    },
  },
}
</script>
  • Vue 2 經典的 Options API 寫法，目前 Vue 3.4 還能運行，但已經很少人使用

Composition API

<template>
  <button @click="onClick">+</button>
  <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    let count = ref(0)

    let onClick = () => count.value++

    return {
      count,
      onClick
    }
  }
}
</script>
  • Vue 3.0 與 Vue 3.1 所使用語法
  • Composition API 必須在 setup() 中 組合 後才能使用

這種寫法雖然符合 JavaScript 語法，但 垃圾 仍然太多

Svelte

<script>
let count = 0

let onClick = () => count += 1
</script>

<button on:click={ onClick }>+</button>
<div>{ count }</div>
  • 當時 Svelte 以這種超精簡語法震驚前端，因為 Svelte 透過 compiler 技巧，會將以上語法做加工

Script Setup

<template>
  <button @click="onClick">+</button>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue'

let count = ref(0)

let onClick = () => count.value++
</script>
  • Vue 3.2 受 Svelte 啟發，也採用 compiler 手法，僅留下最關鍵部分，剩下會由 Vite 在 編譯 時補齊
  • Script Setup 是不折不扣的 syntax sugar

Conclusion

  • Script Setup 已經扶正成為目前 Vue 最新寫法，Vue 官方文件也都使用 Script Setup 改寫
  • 但 Script Setup 有其使用上限制，僅能搭配 Vite 編譯才能使用，若使用 CDN 不搭配 Vite 則無法使用

# Vue