Vue3 - 專案建立與響應式資料
建立 Vue3 專案
- 透過 npm 建立一個 Vue3 專案,指令如下:
npm create vue@latest
cd
到專案位置,執行以下指令:
npm install
- 執行
npm run dev
即可啟動專案。
語法
Vue3 提供了強大的語法 - composition api,這和 Vue2 的 options api 有很大的不同。
雖然仍然可以在 Vue3 中使用 options api,但這通常只會在那些 Vue3 剛出來的專案中看到。
<script setup>
<!-- put all your methods and variables here -->
</script>
<template>
<!-- the HTML structure -->
</template>
<style scoped>
<!-- css style, use `scope` let the css command only work in this component -->
</style>
文本插值
在 template
中若要使用變數,可以使用 {{...}}
,如下:
<span>Message: {{ msg }}</span>
Raw HTML
如果變數包含 HTML 內容,則不應使用 {{...}}
,因為它會將變數的內容視為純文本。這時應使用 v-html
指令插入 HTML 內容:
<!-- rawHtml = <span style="color: red">This should be red.</span> -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Attribute Bindings
如果要綁定變數到 attribute
上,可以使用 v-bind
。例如:
<h1 v-bind:class="{addColor: changed}">I will change my color</h1>
這個範例表示當 changed
為 true
時,<h1>
會加上 addColor
這個 class。
也可以使用 v-bind
的簡寫方式:
<h1 :class="{addColor: changed}">I will change my color</h1>
Vue 還提供很多很好用的指令,例如:
v-for
: 這是用來在template
中做迭代的指令v-if
orv-show
: 這是用來在template
中做條件判斷的指令v-on
: 這是用來在template
中做事件綁定的指令
響應式資料
響應式是 Vue 中的一個重要概念。在 React 中會用 useState
來管理響應式數據。但在 Vue3 中,則使用 ref
、reactive
和 computed
來達到響應式狀態的管理。
ref
ref
可以儲存任何類型的數據。但有些人會偏好把 object 或 array 交給 reactive
來管理,但這裡還是先來講 ref
。例如:
ref
的使用上,當在 <script setup>
中使用 ref
的值時,應該在其後加上 .value
。而在 <template>
中,則可以直接使用 {{ref}}
來取得值。
<script setup>
import { ref } from 'vue';
const num = ref(0)
const changeNum = () => num.value += 1
</script>
<template>
<h1>{{ num }}</h1>
{/* these two lines of code do the same thing */}
<button @click="changeNum">Add one</button>
<button @click="num++">Add one</button>
</template>
注意必須使用 const
來宣告 ref
,不可使用 let
或 var
!
reactive
reactive
可以儲存 object 或 array。
使用 reactive
的值時,不需要在其後加上 .value
。
<script setup>
import { reactive } from 'vue';
const people2 = reactive({
name: 'Jeremy',
gender: 'Male',
age: 20
})
const changePeople2 = () => {
people2.name = 'Lucy'
console.log('people2 changed')
}
</script>
<template>
<h1>{{ people2.name }} / {{ people2.gender }}</h1>
<button @click="changePeople2">Change!</button>
</template>
ref
與 reactive
之間的差異
這兩者之間的差異不只體現在是否取值時需要加上 .value
。當 ref
用來儲存 object 時,object 內部的屬性變化可能不會被 watch
檢測到,因為 ref
主要是用來追蹤直接對其值的賦值。反之,使用 reactive
使得 object 內部屬性的變化更容易被檢測到。
但是但是~ 實務上還是很喜歡直接無腦用 ref
來存 object 或 array,又想要 watch
能夠偵測到 object 內部屬性的變化怎麼辦?這時可以在使用 watch
時加上第三個參數 deep: true
,這樣 watch
就能夠偵測到 ref
object 內部屬性的變化了。
watch(people1, () => {
console.log('something changed')
}, {deep : true})
computed
Vue 還提供了 computed
這個屬性,computed
會在其依賴的數據發生變化時自動重新計算。
computed
通常用於需要根據某些數據自動更新的複雜邏輯,實務上也挺常用在 i18n 切換語系 (怎麼實做不是這篇重點 www)。
以下範例示範未使用 computed
和使用 computed
的差異:
<script setup>
import { ref } from 'vue';
const num1 = ref(1)
const num2 = ref(2)
</script>
<template>
<h1>Num1: {{ num1 }}</h1>
<h1>Num2: {{ num2 }}</h1>
<h1>Num1 + Num2 = {{ num1 + num2 }}</h1>
</template>
<script setup>
import { ref, computed } from 'vue';
const num1 = ref(1)
const num2 = ref(2)
const numPlus = computed(()=>{
return num1.value + num2.value
})
</script>
<template>
<h1>Num1: {{ num1 }}</h1>
<h1>Num2: {{ num2 }}</h1>
<h1>Num1 + Num2 = {{ numPlus }}</h1>
</template>
可以從上面的範例中觀察到,使用 computed
後可以把所有邏輯都放在 <script setup>
中。
method 與 computed
的差異
computed
只有在其依賴的數據發生變化時才會執行。computed
不可以傳參數。computed
預設只有getter
。