Vue 模板語句的數據來源

🧩 Vue 模板語句的數據來源：全方位解析

Vue 模板（<template> 部分）中的表達式、指令綁定（如 v-bind, v-on）和插值（{{ }}）都在一個特定的作用域內求值。這個作用域由當前 組件實例 提供的上下文決定。

以下是模板可以訪問的主要數據來源（按優先級和作用域排序）：

🎯 1. 組件實例自身的狀態與邏輯 (最高優先級)

來源：組件通過 data, computed, methods, props, setup() 返回值 (<script setup> 的頂層綁定) 等定義。
訪問方式：直接在模板中使用定義的名稱。

示例：

<script setup>
// Composition API (<script setup>)
import { ref, computed } from 'vue';const count = ref(0); // 響應式數據 (來源 1a)
const doubleCount = computed(() => count.value * 2); // 計算屬性 (來源 1b)function increment() { // 方法 (來源 1c)count.value++;
}
</script><template><button @click="increment">Count is: {{ count }}</button> <!-- 訪問 ref --><p>Double: {{ doubleCount }}</p> <!-- 訪問 computed -->
</template>

<script>
// Options API
export default {data() { // 數據 (來源 1a)return { message: 'Hello!' };},computed: { // 計算屬性 (來源 1b)reversedMessage() {return this.message.split('').reverse().join('');}},methods: { // 方法 (來源 1c)shout() {this.message = this.message.toUpperCase() + '!';}},props: ['initialCount'] // Props (來源 1d)
}
</script><template><p>{{ message }}</p><p>Reversed: {{ reversedMessage }}</p><button @click="shout">SHOUT</button><p>Initial Count: {{ initialCount }}</p> <!-- 訪問 prop -->
</template>

關鍵點：
- data / ref/reactive：定義組件內部狀態。
- computed：定義基于其他狀態派生的值。
- methods：定義可調用的函數（通常用于事件處理或邏輯）。
- props：接收來自父組件的數據（只讀）。
- setup() 返回值 / <script setup> 頂層綁定：在 Composition API 中提供上述所有功能。

📦 2. 父組件傳遞的 Props

來源：父組件通過屬性 (v-bind 或 :) 傳遞給當前組件。
訪問方式：在子組件中通過 props 選項聲明后，在模板中直接使用名稱訪問。

示例 (Parent.vue):

<template><ChildComponent :user="currentUser" :initial-value="10" />
</template>

示例 (ChildComponent.vue):

<script setup>
// Composition API (<script setup>)
const props = defineProps({user: Object,initialValue: Number
});
</script><template><p>User: {{ user.name }}</p> <!-- 訪問 prop --><p>Starting point: {{ initialValue }}</p>
</template>

<script>
// Options API
export default {props: ['user', 'initialValue'] // 聲明 props
}
</script><template><p>User: {{ user.name }}</p><p>Starting point: {{ initialValue }}</p>
</template>

關鍵點：
- 只讀性：子組件不應該直接修改 props (Vue 會警告)。如果需要“修改”，應通過觸發事件讓父組件修改原始數據。
- Prop 聲明：必須顯式聲明 (defineProps 或 props 選項) 才能訪問。

🪝 3. 組件注入的依賴 (Provide/Inject)

來源：祖先組件通過 provide 提供的數據/方法。
訪問方式：在需要使用的后代組件中通過 inject 獲取。

示例 (祖先組件):

<script setup>
import { provide, ref } from 'vue';const theme = ref('dark');
provide('appTheme', theme); // 提供 'appTheme' 鍵名及其值
</script>

示例 (后代組件):

<script setup>
import { inject } from 'vue';const injectedTheme = inject('appTheme'); // 注入 'appTheme'
</script><template><div :class="`theme-${injectedTheme}`">...</div>
</template>

關鍵點：
- 跨層級通信：解決深層嵌套組件 props 逐層傳遞的繁瑣問題。
- 非響應式默認：注入的值默認不是響應式的。如果提供的是 ref 或 reactive 對象，則注入后保持響應式連接。
- 慎用：會使組件間關系變得隱式，增加理解難度。優先考慮 props/emits 或狀態管理 (Pinia)。

📌 4. Vue 內置的全局對象與屬性 (謹慎使用)

來源：Vue 在組件實例上暴露的一些特殊屬性（通常以 $ 開頭）。
訪問方式：直接在模板中使用（例如 $attrs, $slots, $emit, $route, $store）。
常見內置屬性：
- $attrs：包含父組件傳遞但未在 props 中聲明的所有屬性（常用于透傳）。
- $slots：訪問組件接收的插槽內容。
- $emit：觸發自定義事件（@my-event="handler" 對應 $emit('my-event')）。
- $el (Options API)：訪問組件根 DOM 元素（在 mounted 后可用，Composition API 通常用 ref 替代）。
- $router / $route (Vue Router)：訪問路由實例和當前路由信息（需安裝路由）。
- $store (Vuex/Pinia)：訪問狀態管理庫的 Store（需安裝狀態庫）。

示例:

<template><!-- 透傳所有未聲明屬性和事件到內部元素 --><input v-bind="$attrs" v-on="$listeners"> <!-- Vue 2 特有 $listeners --><button @click="$emit('save')">Save</button><p>Current Path: {{ $route.path }}</p>
</template>

關鍵點：
- 特定庫依賴：$router, $route, $store 等需要對應的插件 (vue-router, pinia/vuex) 安裝并注冊到應用。
- 避免濫用：在模板中過度使用 $emit、$route 或 $store 可能使邏輯分散，復雜邏輯應盡量移到 <script> 部分。

🌍 5. 全局作用域 (有限訪問 / 通常避免)

來源：瀏覽器全局對象 (window, document, console) 或全局定義的變量/函數。

訪問方式：

受限：Vue 模板的執行上下文是沙盒化的，不能直接訪問全局作用域（如 window, 全局 const myGlobal = ...）。

間接訪問：

顯式掛載到組件實例 (不推薦污染組件實例):

<script setup>
import { onMounted } from 'vue';
window.myGlobalFunction = () => { ... }; // 定義在 window 上
</script>
<template><button @click="window.myGlobalFunction()">Call Global</button> <!-- 直接訪問 window 屬性 -->
</template>

在組件邏輯中引用，然后暴露給模板 (推薦方式):

<script setup>
import { ref } from 'vue';
// 在 <script> 中引用全局變量
const globalValue = ref(window.someGlobalConfig);
</script>
<template><p>Config: {{ globalValue }}</p>
</template>

關鍵點：
- 強烈不推薦：直接在模板中訪問 window 或全局變量。這會：
  - 破壞組件的封裝性和可移植性。
  - 使代碼難以測試（依賴全局環境）。
  - 可能導致意外的命名沖突。
- 最佳實踐：將需要的全局信息在組件的 <script> 部分引入（如從配置模塊導入），然后作為組件自身的狀態或計算屬性暴露給模板。

🔍 數據訪問優先級與作用域鏈總結

當模板中使用一個名稱 (如 message) 時，Vue 會按以下順序查找其來源：

組件自身狀態/邏輯 (data/ref/reactive, computed, methods, props 聲明項, setup() 返回值/<script setup> 頂層綁定) ? 最高優先級
父組件傳遞的 props (需聲明)
注入的依賴 (inject) (需注入)
Vue 內置實例屬性 ($attrs, $slots, $emit, $route 等)
全局作用域 (window, document) (需顯式訪問或間接引用，強烈不推薦直接使用)

? 重要規則：

就近優先：如果局部定義了 count，就不會去訪問注入的或全局的同名變量。
Props 只讀：模板中不能直接修改 props (Vue 會警告)。

作用域隔離：模板不能直接訪問其所在 <script> 標簽中定義的局部變量 (除非通過 setup() 返回或 <script setup> 頂層暴露)。例如：

<script setup>
const localVar = 'I am hidden'; // 局部變量，模板無法訪問！
const publicVar = ref('I am visible'); // 頂層綁定，模板可以訪問
</script>

🚫 為什么模板不能直接訪問全局變量？

Vue 有意將模板的執行環境與全局作用域隔離，主要為了：

避免命名沖突：防止全局變量意外覆蓋組件內部狀態或方法。
提高可預測性：模板中看到的名字一定來源于組件自身、props、注入或 Vue 內置屬性，代碼行為更清晰。
增強封裝性與可復用性：組件不依賴外部全局環境，更容易在不同項目或上下文中復用。
提升安全性：減少潛在的安全風險（如無意中暴露全局敏感數據）。

? 最佳實踐：清晰定義數據來源

優先使用組件自身狀態 (ref, reactive, data) 和 props：這是最清晰、最可維護的數據來源。
需要跨層級共享狀態時：
- 考慮 Provide/Inject (適用于有明確祖先/后代關系的特定數據)。
- 更通用的場景使用 狀態管理庫 (Pinia)。
需要訪問全局配置：在 <script> 中導入配置模塊或初始化時讀取全局對象，然后將其轉化為組件的響應式狀態 (ref, reactive) 或計算屬性 (computed) 暴露給模板。
避免在模板中直接使用 $route, $store 進行復雜邏輯：將相關邏輯移到 <script> 中的方法、計算屬性或 Composables 函數中，保持模板簡潔。
明確區分來源：使用清晰的命名約定（如 props 用 propXxx，注入用 injectedXxx）可以顯著提高代碼可讀性。