?

? Vue3作為現代前端主流框架，是前后端開發者都應當掌握的核心技能。本篇文章將帶你了解vue3的基礎核心知識，適合學習與復習

一、Vue 3 應用創建

1.1 創建Vue應用的基本步驟

// main.js
import { createApp } from 'vue'  // 1. 導入createApp函數
import App from './App.vue'     // 2. 導入根組件const app = createApp(App)      // 3. 創建應用實例
app.mount('#app')               // 4. 掛載到DOM元素

詳細說明：

• createApp?是Vue 3新引入的函數，替代了Vue 2的new Vue()

• 每個Vue應用都是通過createApp函數創建的

• mount()方法將Vue應用掛載到指定的DOM元素上（通常是index.html中的<div id="app"></div>）

二、模板語法詳解

2.1 文本插值

<template><p>{{ message }}</p>  <!-- 雙大括號語法 -->
</template><script setup>
const message = 'Hello Vue 3!'
</script>

要點：

• 雙大括號{{ }}稱為"Mustache"語法

• 內部可以寫簡單的JavaScript表達式

• 不支持語句或復雜邏輯（應該使用計算屬性）

2.2 常用指令

v-if / v-else / v-else-if

<div v-if="score >= 90">優秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

注意事項：

• 條件渲染會真正創建/銷毀元素

• 頻繁切換時考慮使用v-show

v-for

<ul><li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
</ul>

最佳實踐：

• 必須為每個項提供唯一的:key

• 可以使用對象解構：v-for="{ id, name } in users"

v-bind (縮寫:)

<img :src="imageUrl" :alt="imageAlt">
<div :class="{ active: isActive, 'text-danger': hasError }"></div>

v-on (縮寫@)注冊事件

<button @click="handleClick">點擊</button>
<input @keyup.enter="submit">

v-model

<input v-model="message" placeholder="輸入內容">
<select v-model="selected"><option value="A">選項A</option>
</select>

原理：?相當于以下語法糖

<input :value="text" @input="text = $event.target.value"
>

三、響應式系統核心

3.1 ref 和 reactive

一：ref 是什么？

在 Vue 3 或者其他采用響應式設計的框架里，ref?是用于創建響應式數據的函數。它會把傳入的參數封裝成一個對象，這個對象具備?.value?屬性，借助這個屬性就能訪問或修改原始值。

<script setup>
import { ref, reactive } from 'vue'// 基本類型使用ref
const count = ref(0)
console.log(count.value) // 訪問值// 對象類型使用reactive
const user = reactive({name: 'Alice',age: 25
})
console.log(user.name) // 直接訪問
</script>

區別對比：

特性	ref	reactive
適用類型	基本類型	對象類型
訪問方式	需要.value	直接訪問
模板中使用	自動解包	直接使用
重新賦值	支持	不推薦

3.2 響應式原理

Vue 3使用Proxy實現響應式：

• 當數據變化時，自動更新DOM

• 跟蹤依賴關系，精確更新

• 性能優于Vue 2的Object.defineProperty

四、計算屬性和監聽器

4.1 計算屬性 (computed)

核心步驟：1導入computed函數

? ? ? ? ? ? ? ? ? 2執行函數在回調參數中return基于響應式數據做計算的值，用變量接收

<script setup>
import { ref, computed } from 'vue'const price = ref(10)
const quantity = ref(2)// 自動計算總價（有緩存）
const total = computed(() => {return price.value * quantity.value//這里面放計算屬性的計算邏輯
})
</script>

特點：

• 基于它們的響應式依賴進行緩存

• 依賴不變時不會重新計算

• 適合復雜邏輯計算

最佳實踐：1計算屬性中不應該有副作用，比如異步請求修改dom

? ? ? ? ? ? ? ? ? 2避免直接修改計算屬性的值

4.2 監聽器 (watch)

作用：偵聽一個或者多個數據的變化，數據變化時執行回調函數

回調函數：作為參數傳遞給其他函數的一種函數，其目的是在某個特定事件發生或者完成特定操作之后再執行。

一：監聽一個數據的變化

import { ref, watch } from 'vue'const count = ref(0)// 當count變化時執行
watch(count, (新值, 舊值) => {console.log(`計數器從${舊值}變成了${新值}`)
})

二：監聽多個數據的變化?

const count = ref(0)
const name = ref('張三')// 同時監聽count和name
watch([count, name], ([新count, 新name], [舊count, 舊name]) => {console.log(`count變化: ${舊count}→${新count}`)console.log(`name變化: ${舊name}→${新name}`)
})

三：immediate立即執行

const user = ref(null)// 頁面加載時立即執行一次
watch(user, (新值) => {if(新值) {console.log('用戶數據:', 新值)}
}, {immediate: true  // 關鍵配置
})

使用場景：頁面初始化時需要立即獲取數據?

四：?深度監聽（deep）

const formData = ref({name: '',address: {city: '',district: ''}
})// 監聽對象內部變化
watch(formData, (新值) => {console.log('表單變化:', 新值)
}, {deep: true  // 監聽對象內部屬性變化
})

默認watch進行的是淺層監視，監視簡單數據類型的數據，使用deep:true后則可以監視復雜數據類型的變化

使用場景：監聽復雜對象或嵌套數據

?五：?精確控制監聽

watch(() => user.value.age,  // 只監聽user對象的age屬性(新年齡) => {console.log('年齡變化:', 新年齡)}
)

五、組件基礎

5.1 組件定義

<!-- ChildComponent.vue -->
<template><div class="child"><h3>{{ title }}</h3><button @click="emitEvent">觸發事件</button></div>
</template><script setup>
// 定義props
defineProps({title: {type: String,default: '默認標題'}
})// 定義emits
const emit = defineEmits(['custom-event'])const emitEvent = () => {emit('custom-event', '額外數據')
}
</script>

5.2 組件使用

<template><ChildComponent title="子組件標題"@custom-event="handleEvent"/>
</template><script setup>
import ChildComponent from './ChildComponent.vue'const handleEvent = (data) => {console.log('收到子組件事件:', data)
}
</script>

六、生命周期鉤子

Vue 3主要生命周期：

import { onMounted, onUpdated, onUnmounted } from 'vue'onMounted(() => {console.log('組件掛載完成')// 適合做DOM操作、API請求等
})onUpdated(() => {console.log('組件更新完成')
})onUnmounted(() => {console.log('組件卸載')// 適合做清理工作
})

完整生命周期流程：

1. setup() → 2. onBeforeMount → 3. onMounted → 4. onBeforeUpdate → 5. onUpdated → 6. onBeforeUnmount → 7. onUnmounted

---

記住：Vue 3的學習是一個循序漸進的過程，建議邊學邊實踐，通過小項目鞏固知識。

組件定意的詳細內容見Vue 3 核心概念詳解：生命周期、組件通信與模板引用

?