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）可以显著提高代码可读性。