Vue 基礎 I.
.vue檔裡面骨架長怎樣? 骨架分為 template、style、script 三個區塊，簡單敘述一下 :
templateHTML模板區，放置Html標籤。styleCSS編譯區，針對模板樣式編寫區域。<style><style scope>加入 scope 屬性或 module 屬性，只對此模板元件。
script程式區，這裡還有分兩種寫法 :<script>針對'具名輸出'、'指定Options'、'只執行一次的元件'使用。<script setup>加入 setup 屬性，其實就是Composition API寫法<script>+setup()。
也可以在上述的標籤中加入 lang 屬性，針對'ts'|'pug'|'scss'來編譯自己熟悉的項目；而<script>與<script setup>某些情形下是可以共存，有機會再來提。
js
<template> <p> html </p> </template>
<style> p { font-size : 10px } </style>
<script>
import { ref } from 'vue'
export default{
setup(){
}
}
</script>
Option API 與 Composition API 兩種寫法
Vue 3之後開始分為兩種寫法，如果一路從Vue 2寫上來，就可以體會兩種差異，也較能適應；不過既然有新寫法，我建議直接從Composition API開始著手。
以下是兩種寫法的差異 :
js
// Option API用法 :
export default{
data(){
return {
data:[]
}
},
methods:{
fuction():{ '使用的方法' }
},
computed:{
fuction():{ '對data計算或加工' }
}
}
js
// Composition API用法
import { computed, reactive, ref } from 'vue'
export defualt{
setup(){
// data 區
const data=reactive[]
// methods 區
const function xx(){ '使用的方法' }
const function xxx=()=>{ '使用的方法' }
// computed 區
const function=computed(()=>{ '對data計算或加工' })
return{
data, xx, xxx
}
}
}
TIP
Composition API 如果沒有刻意備註，看似比較亂，這是要求coding的人需要架構自主性，做好程式編寫的規則，保持讀碼的乾淨。
通常我會依照Vue 2的方式進行區域編寫，將data、methods、computed放在各自的區塊，這樣在讀碼時，較能對應各自的內容，如上述的寫法。不過這樣的區塊寫法，我覺得是要追溯到 Vue生命週期。
當然每個人或公司都有各自的編碼原則，主要目的也是為了編碼視覺上不要混亂，否則接手你後續編碼的人會吐血給你看。