Vue的開發筆記-建構與不建構的元件寫法差異

我在學習vue的過程中，一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑，原因是有沒有用vite建構，在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。

起手式

1.非建構:使用cdn

在html的header中插入以下script標籤

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2.建構:用npm安裝

 npm create vue@latest

元件的檔案:SFC與js

使用建構與非建構的方式的第一個差異，就是用建構的方式就可以用单文件组件 (SFC)的方式來寫元件，而非建構的方式則不能。

1.建構:寫在SFC 中，其檔案結尾為vue。

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

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

2.非建構:寫在另一個JS檔中，或是跟父元件寫在一起。

 import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
  // 也可以针对一个 DOM 内联模板：
  // template: '#my-template-element'
}

元件的註冊

元件有分成全域元件與區域元件。

全域元件都是在用app中的component方法​

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)​

或是註冊import進的SFC

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

而區域元件則是在父元件中用component​

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

SFC(也就是建構的)有提供個酷東西<script setup>，用了之後元件就可以直接使用，不用註冊了。

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

元件的使用

如果是用非建構的方式，要注意是否是在DOM中寫模板(也就是元件要寫入的html)。如果是的話要注意命名格式與需要遵循瀏覽器的html解析行為。

命名格式 - kebab-case

在模板中要使用 kebab-case (短横线连字符) 形式

JavaScript 中的 camelCase

 
 const BlogPost = {
   props: ['postTitle'],
     emits: ['updatePost'],
       template: `
           <h3>{{ postTitle }}</h3>
             `
             }​

HTML 中的 kebab-case

<blog-post post-title="hello!" @update-post="onUpdatePost"></blog-post>

瀏覽器的html解析行為

要使用有開頭與結尾的兩個標籤

<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

建構的寫法

接著建構的寫法來了

1.不會有在DOM中寫模板的問題，在模板中一律都一樣用PascalCase

2.不用顧慮瀏覽器的感受，用一個標籤加上/就可以了

<h1>Here is a child component!</h1>
<ButtonCounter />
<ButtonCounter />
<ButtonCounter />

結語

相信大家也發現，如果用非建構的方式要去注意很多小細節，像是區域元件要在父元件註冊、然後在模板使用也要注意寫大小寫得不同寫法，在開發上沒有這麼的順手。我想vue的開發團隊也有聽到大家的心聲，所以讓我們再用建構的方式的時候，可以用更簡潔直覺的方式使用。