技術文章 » Vue3從入門到精通(一)

Vue3從入門到精通(一)

2023-06-07 12:01:16

Vue3簡介

Vue3是Vue.js的最新版本，於2020年9月18日正式釋出。Vue3相比Vue2有很多改進和優化，包括但不限於：

  1. 更快的渲染速度：Vue3通過使用Proxy代理物件和優化虛擬DOM演演算法等方式，提高了渲染效能。

  2. 更小的體積：Vue3的體積比Vue2更小，打包後的檔案更小，載入速度更快。

  3. 更好的型別支援：Vue3對TypeScript的支援更加友好，提供了更好的型別支援。

  4. 更好的組合式API：Vue3提供了更好的組合式API，使得元件的複用和維護更加方便。

  5. 更好的Tree-shaking支援：Vue3對Tree-shaking的支援更加完善，可以更好地優化打包後的程式碼。

總之，Vue3是一個更加優秀的版本，可以幫助開發者更好地構建高效能、易維護的Web應用程式。

Vue API風格

Vue API風格主要有兩種：物件風格和函數風格。

  1. 物件風格

物件風格是Vue 2.x版本的API風格，它將Vue範例作為一個物件，通過物件的屬性和方法來操作Vue範例。例如：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    showMessage: function () {
      alert(this.message)
    }
  }
})
​
vm.message = 'Hello World!'
vm.showMessage()

在上面的程式碼中，我們使用物件風格的API來建立Vue範例，設定資料和方法，並通過vm物件來操作Vue範例。

  1. 函數風格

函數風格是Vue 3.x版本的API風格，它將Vue範例作為一個函數，通過函數的引數和返回值來操作Vue範例。例如：

import { createApp } from 'vue'
​
const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message)
    }
  }
})
​
const vm = app.mount('#app')
​
vm.message = 'Hello World!'
vm.showMessage()

在上面的程式碼中，我們使用函數風格的API來建立Vue範例，設定資料和方法，並通過app.mount()方法來掛載Vue範例，然後通過vm物件來操作Vue範例。

總的來說，函數風格的API更加簡潔和易於理解，而且更加符合現代JavaScript的程式設計風格。因此，Vue 3.x版本的API採用了函數風格。

Vue3開發前的準備

在開始使用Vue3進行開發之前，需要進行以下準備工作：

  1. 安裝Node.js和npm

Vue3需要Node.js和npm的支援，因此需要先安裝它們。可以在Node.js官網下載對應版本的安裝包進行安裝。

  1. 安裝Vue CLI

Vue CLI是Vue.js官方提供的腳手架工具，可以幫助我們快速建立Vue專案。可以使用以下命令全域性安裝Vue CLI：

npm install -g @vue/cli

  1. 選擇編輯器

選擇一個適合自己的編輯器進行開發，推薦使用Visual Studio Code，它有很多Vue相關的外掛和工具。

  1. 學習Vue基礎知識

在使用Vue3進行開發之前，需要先掌握Vue的基礎知識，包括Vue的核心概念、Vue元件、Vue指令、Vue生命週期等。

  1. 學習TypeScript

Vue3使用TypeScript進行開發，因此需要先學習TypeScript的基礎知識，包括TypeScript的資料型別、介面、類、泛型等。

總的來說，學習Vue3需要一定的前置知識，需要掌握Node.js、npm、Vue CLI、編輯器、Vue基礎知識和TypeScript等知識點。

vue3 專案目錄結構

Vue3專案的目錄結構與Vue2有些不同，主要是因為Vue3使用了新的模組化系統和TypeScript語言。

以下是一個Vue3專案的典型目錄結構：

├── public
│   ├── index.html
│   └── favicon.ico
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── utils
│   ├── views
│   ├── App.vue
│   └── main.ts
├── tests
├── node_modules
├── package.json
├── tsconfig.json
└── README.md

  • public：存放靜態資原始檔，如HTML檔案、圖片、圖示等。

  • src：存放原始碼檔案。

    • assets：存放靜態資原始檔，如CSS、圖片、字型等。

    • components：存放Vue元件檔案。

    • router：存放Vue Router路由檔案。

    • store：存放Vuex狀態管理檔案。

    • utils：存放工具函數檔案。

    • views：存放頁面元件檔案。

    • App.vue：根元件檔案。

    • main.ts：入口檔案，包括Vue範例的建立和掛載等。

  • tests：存放測試檔案。

  • node_modules：存放專案依賴的第三方庫。

  • package.json：存放專案的設定資訊和依賴庫資訊。

  • tsconfig.json：存放TypeScript編譯器的設定資訊。

  • README.md：專案說明檔案。

總的來說，Vue3專案的目錄結構與Vue2有些不同，但是基本的結構還是相似的，包括靜態資原始檔、原始碼檔案、測試檔案、依賴庫資訊等。

vue3 模板語法

Vue3的模板語法與Vue2的模板語法基本相同，但也有一些變化。以下是Vue3的模板語法：

  1. 插值表示式

Vue3的插值表示式使用{{}}，例如：

<div>{{ message }}</div>

  1. 指令

Vue3的指令使用v-字首，例如：

<input v-model="message">

常用的指令包括：

  • v-if：條件渲染。

  • v-for：迴圈渲染。

  • v-bind：繫結屬性。

  • v-on：繫結事件。

  • v-model：雙向繫結。

  1. 計算屬性

Vue3的計算屬性使用computed關鍵字，例如：

<template>
  <div>{{ reversedMessage }}</div>
</template>
​
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

  1. 監聽器

Vue3的監聽器使用watch關鍵字，例如：

<template>
  <div>{{ message }}</div>
</template>
​
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

  1. 生命週期

Vue3的生命週期與Vue2基本相同，但是使用了新的API。例如：

<template>
  <div>{{ message }}</div>
</template>
​
<script>
import { onMounted, onUpdated, onUnmounted } from 'vue'
​
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  setup() {
    onMounted(() => {
      console.log('mounted')
    })
    onUpdated(() => {
      console.log('updated')
    })
    onUnmounted(() => {
      console.log('unmounted')
    })
  }
}
</script>

總的來說，Vue3的模板語法與Vue2基本相同，但是使用了新的API，包括computed、watch和生命週期等。

vue3 屬性繫結

在Vue3中，屬性繫結使用v-bind:或簡寫的:，例如：

<template>
  <div :class="className"></div>
</template>
​
<script>
export default {
  data() {
    return {
      className: 'red'
    }
  }
}
</script>

上面的程式碼中，:class繫結了一個名為className的data屬性，這個屬性的值為'red'，所以<div>元素會被新增一個class屬性，值為'red'。

除了繫結data屬性，還可以繫結表示式、計算屬性、甚至是方法的返回值。例如：

<template>
  <div :class="isActive ? 'active' : 'inactive'"></div>
  <div :class="getClass()"></div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  methods: {
    getClass() {
      return this.isActive ? 'active' : 'inactive'
    }
  }
}
</script>

上面的程式碼中，:class繫結了一個三元表示式和一個方法的返回值，這兩個值都可以被作為class屬性的值。

需要注意的是，在Vue3中，繫結屬性時，可以使用v-bind:或簡寫的:，但是在繫結事件時，必須使用v-on:或簡寫的@。例如：

<template>
  <button @click="handleClick">Click me</button>
</template>
​
<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>

上面的程式碼中，@click繫結了一個handleClick方法，這個方法會在按鈕被點選時被呼叫。

vue3 條件渲染

Vue3中的條件渲染和Vue2類似，使用v-if和v-else指令來控制元素的顯示和隱藏。

範例程式碼如下：

<template>
  <div>
    <div v-if="show">顯示內容</div>
    <div v-else>隱藏內容</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

上面的程式碼中，根據show的值來決定顯示哪個<div>元素。

除了v-if和v-else，還有v-else-if可以用來實現多個條件的判斷。

範例程式碼如下：

<template>
  <div>
    <div v-if="type === 'A'">型別A</div>
    <div v-else-if="type === 'B'">型別B</div>
    <div v-else-if="type === 'C'">型別C</div>
    <div v-else>未知型別</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      type: 'B'
    }
  }
}
</script>

上面的程式碼中，根據type的值來決定顯示哪個<div>元素。

需要注意的是，v-if是惰性的，只有當條件為真時才會渲染元素，否則不會渲染。而v-show則是直接控制元素的顯示和隱藏，不管條件是否為真，元素都會被渲染，只是樣式被設定為display: none。

vue3 列表渲染

Vue3中的列表渲染和Vue2類似，使用v-for指令來遍歷陣列或物件，並生成對應的元素。

範例程式碼如下：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>
​
<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  }
}
</script>

上面的程式碼中，使用v-for指令遍歷list陣列，並生成對應的<li>元素。

除了陣列，也可以遍歷物件，例如：

<template>
  <ul>
    <li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>
​
<script>
export default {
  data() {
    return {
      obj: {
        key1: 'value1',
        key2: 'value2',
        key3: 'value3'
      }
    }
  }
}
</script>

上面的程式碼中，使用v-for指令遍歷obj物件，並生成對應的<li>元素。

需要注意的是，每個v-for都需要指定一個唯一的key屬性，用來標識每個元素的唯一性，以便在更新時能夠正確地識別每個元素。

vue3 通過key管理狀態

在Vue3中，通過key屬性可以管理元件或元素的狀態。當一個元件或元素的key屬性發生變化時，Vue會認為它是一個不同的元件或元素，從而重新渲染它。

範例程式碼如下：

<template>
  <div>
    <button @click="toggle">切換</button>
    <div v-if="show" :key="1">顯示內容</div>
    <div v-else :key="2">隱藏內容</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

上面的程式碼中，使用key屬性來管理<div>元素的狀態。當show變數的值發生變化時，<div>元素的key屬性也會發生變化，從而重新渲染<div>元素。

需要注意的是，key屬性的值必須是唯一的，不能重複。如果重複了，會導致Vue無法正確地識別每個元件或元素的狀態，從而導致渲染錯誤。

vue3 事件處理

在Vue3中，事件處理的方式與Vue2相似，可以使用@或v-on指令來繫結事件。不同之處在於，Vue3中取消了.sync修飾符，同時提供了新的修飾符和事件API。

  1. 繫結事件

可以使用@或v-on指令來繫結事件，語法與Vue2相同。範例如下：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

上面的程式碼中，使用@click指令來繫結handleClick方法，當按鈕被點選時，會觸發handleClick方法。

  1. 事件修飾符

Vue3中提供了新的事件修飾符，包括.stop、.prevent、.capture、.self、.once和.passive。範例如下：

<template>
  <div @click.stop="handleClick">Click me</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Div clicked!')
    }
  }
}
</script>

上面的程式碼中，使用.stop修飾符來阻止事件冒泡，當div元素被點選時，不會觸發其父元素的點選事件。

  1. 動態事件名

在Vue3中，可以使用方括號來繫結動態事件名。範例如下：

<template>
  <button @[eventName]="handleClick">Click me</button>
</template>
​
<script>
export default {
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

上面的程式碼中，使用@[eventName]指令來繫結動態事件名，事件名為eventName的值。

  1. 自定義事件

在Vue3中，可以使用createApp方法的provide和inject選項來實現自定義事件的傳遞。範例如下：

// App.vue
<template>
  <button @click="handleClick">Click me</button>
</template>
​
<script>
import { provide } from 'vue'
import EventBus from './EventBus'
​
export default {
  setup() {
    provide('eventBus', EventBus)
  },
  methods: {
    handleClick() {
      EventBus.emit('customEvent', 'Hello, Vue3!')
    }
  }
}
</script>
​
// EventBus.js
import mitt from 'mitt'
​
const EventBus = mitt()
​
export default EventBus
​
// ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>
​
<script>
import { inject } from 'vue'
​
export default {
  setup() {
    const eventBus = inject('eventBus')
    const message = ref('')
​
    eventBus.on('customEvent', (data) => {
      message.value = data
    })
​
    return {
      message
    }
  }
}
</script>

上面的程式碼中，使用provide方法將事件匯流排物件EventBus注入到根元件中，然後在子元件中使用inject方法獲取事件匯流排物件，並通過on方法監聽自定義事件customEvent，當事件觸發時，更新message的值。

vue3 事件傳參

在Vue3中，事件傳參的方式和Vue2基本相同，可以使用$event來傳遞事件物件，也可以使用函數來傳遞自定義引數。

範例程式碼如下：

<template>
  <div>
    <button @click="handleClick($event, '引數')">點選</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick(event, arg) {
      console.log(event) // 輸出事件物件
      console.log(arg) // 輸出自定義引數
    }
  }
}
</script>

上面的程式碼中，使用$event來傳遞事件物件，使用'引數'來傳遞自定義引數。

另外，如果需要在事件處理常式中存取元件範例，可以使用箭頭函數來繫結作用域，例如：

<template>
  <div>
    <button @click="() => handleClick('引數')">點選</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick(arg) {
      console.log(this) // 輸出元件範例
      console.log(arg) // 輸出自定義引數
    }
  }
}
</script>

上面的程式碼中，使用箭頭函數來繫結作用域，從而在事件處理常式中存取元件範例。

vue3 事件修飾符

在Vue3中，事件修飾符的使用方式和Vue2基本相同，可以通過在事件名後面新增.修飾符的方式來使用事件修飾符。

常用的事件修飾符包括：

  • .stop：阻止事件冒泡

  • .prevent：阻止事件預設行為

  • .capture：使用事件捕獲模式

  • .self：只在事件目標自身觸發時觸發事件

  • .once：只觸發一次事件

  • .passive：告訴瀏覽器該事件不會呼叫preventDefault()方法，可以優化頁面捲動效能

範例程式碼如下：

<template>
  <div>
    <button @click.stop="handleClick">點選</button>
    <a href="#" @click.prevent="handleClick">連結</a>
    <div @click.capture="handleClick">容器</div>
    <button @click.self="handleClick">點選</button>
    <button @click.once="handleClick">點選</button>
    <div @scroll.passive="handleScroll">捲動</div>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick() {
      console.log('點選事件')
    },
    handleScroll() {
      console.log('捲動事件')
    }
  }
}
</script>

上面的程式碼中，使用不同的事件修飾符來控制事件的行為。例如，使用.stop修飾符來阻止事件冒泡，使用.prevent修飾符來阻止事件預設行為，使用.capture修飾符來使用事件捕獲模式，使用.self修飾符來只在事件目標自身觸發時觸發事件，使用.once修飾符來只觸發一次事件，使用.passive修飾符來告訴瀏覽器該事件不會呼叫preventDefault()方法，可以優化頁面捲動效能。

vue3 計算屬性

在Vue3中，計算屬性的使用方式和Vue2基本相同，可以通過在元件的computed選項中定義計算屬性來計算和快取值。

範例程式碼如下：

<template>
  <div>
    <p>商品數量：{{ quantity }}</p>
    <p>商品總價：{{ totalPrice }}</p>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      price: 10,
      count: 2
    }
  },
  computed: {
    quantity() {
      return this.count
    },
    totalPrice() {
      return this.price * this.count
    }
  }
}
</script>

上面的程式碼中，使用computed選項來定義計算屬性quantity和totalPrice，分別計算商品數量和商品總價。

在模板中，可以像存取普通屬性一樣存取計算屬性，例如{{ quantity }}和{{ totalPrice }}。

需要注意的是，在Vue3中，計算屬性的返回值可以是一個函數，這樣可以實現動態計算屬性。範例程式碼如下：

<template>
  <div>
    <p>商品數量：{{ quantity }}</p>
    <p>商品總價：{{ totalPrice }}</p>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      price: 10,
      count: 2,
      discount: 0.8
    }
  },
  computed: {
    quantity() {
      return this.count
    },
    totalPrice() {
      return () => this.price * this.count * this.discount
    }
  }
}
</script>

上面的程式碼中，計算屬性totalPrice返回一個函數，這個函數會動態計算商品總價，考慮到折扣可能會變化，因此需要動態計算商品總價。

vue3 class繫結

在Vue3中，可以使用v-bind:class指令來繫結一個物件或陣列來動態地設定一個元素的class屬性。

下面是使用物件語法系結class的範例程式碼：

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

上面的程式碼中，使用:class指令來繫結一個物件，這個物件的屬性名是class名稱，屬性值是一個布林值，表示是否應用這個class。在這個範例中，如果isActive為true，則會應用active這個class，如果hasError為true，則會應用text-danger這個class。

下面是使用陣列語法系結class的範例程式碼：

<template>
  <div :class="[isActive ? 'active' : '', errorClass]">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true,
      errorClass: 'text-danger'
    }
  }
}
</script>

上面的程式碼中，使用:class指令來繫結一個陣列，這個陣列的元素可以是字串或物件。如果陣列元素是字串，則表示應用這個class；如果陣列元素是物件，則表示應用這個物件中的class。

在這個範例中，如果isActive為true，則會應用active這個class，如果errorClass為text-danger，則會應用text-danger這個class。

需要注意的是，在Vue3中，可以使用動態元件來動態渲染不同的元件，這個功能可以使用<component>元素和is特性來實現。範例程式碼如下：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">ComponentA</button>
    <button @click="currentComponent = 'ComponentB'">ComponentB</button>
    <component :is="currentComponent"></component>
  </div>
</template>
​
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
​
export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

上面的程式碼中，使用<component>元素和is特性來動態渲染不同的元件。在這個範例中，點選ComponentA按鈕會渲染ComponentA元件，點選ComponentB按鈕會渲染ComponentB元件。

vue3 style 繫結

在Vue3中，可以使用v-bind指令或簡寫的:來動態繫結樣式。

  1. 繫結單個樣式

可以使用物件語法來繫結單個樣式，物件的屬性名為樣式名，屬性值為樣式值。範例如下：

<template>
  <div :style="{ color: textColor }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red'
    }
  }
}
</script>

上面的程式碼中，使用:style指令來繫結color樣式，樣式的值為textColor的值。

  1. 繫結多個樣式

可以使用物件語法來繫結多個樣式，物件的屬性名為樣式名，屬性值為樣式值。範例如下：

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

上面的程式碼中，使用:style指令來繫結color和fontSize兩個樣式，樣式的值分別為textColor和fontSize的值。

  1. 繫結樣式陣列

可以使用陣列語法來繫結多個樣式，陣列中的元素為樣式物件。範例如下：

<template>
  <div :style="[baseStyles, customStyles]">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      baseStyles: {
        color: 'red',
        fontSize: '16px'
      },
      customStyles: {
        fontWeight: 'bold'
      }
    }
  }
}
</script>

上面的程式碼中，使用:style指令來繫結baseStyles和customStyles兩個樣式物件，樣式的值為兩個物件的合併結果。

  1. 繫結樣式物件

可以使用計算屬性來動態繫結樣式物件。範例如下：

<template>
  <div :style="computedStyles">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  },
  computed: {
    computedStyles() {
      return {
        color: this.textColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

上面的程式碼中，使用計算屬性computedStyles來動態繫結樣式物件，樣式的值為計算屬性的返回值。