Vue 3 实例选项

在 Vue 3 中，我们可以使用 createApp() 方法创建 Vue 实例，并在其中定义各种 实例选项，用于管理数据、方法、生命周期钩子、计算属性、指令等。

1. 创建 Vue 实例

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

createApp(App) 用于创建 Vue 应用，并使用 app.mount('#app') 挂载到 HTML 元素上。

2. Vue 3 主要实例选项

（1）data – 定义组件的数据

data 选项用于定义 组件的数据，Vue 3 推荐使用 ref() 或 reactive() 进行数据管理。

使用 reactive()

<script setup>
import { reactive } from 'vue';

const state = reactive({
  message: 'Hello Vue 3!',
  count: 0
});
</script>

<template>
  <p>{{ state.message }}</p>
  <p>计数：{{ state.count }}</p>
  <button @click="state.count++">增加</button>
</template>

使用 ref()

<script setup>
import { ref } from 'vue';

const message = ref('Hello Vue 3!');
const count = ref(0);
</script>

<template>
  <p>{{ message }}</p>
  <p>计数：{{ count }}</p>
  <button @click="count++">增加</button>
</template>

💡 ref() 适用于单个值，reactive() 适用于对象或数组。

（2）methods – 定义方法

用于定义组件的方法，在 Vue 3 组合式 API 中推荐直接定义函数。

<script setup>
const sayHello = () => {
  alert('Hello, Vue 3!');
};
</script>

<template>
  <button @click="sayHello">点击我</button>
</template>

💡 Vue 3 组合式 API 不再需要 methods 选项，直接在 setup 中定义函数即可。

（3）computed – 计算属性

计算属性 computed 主要用于 派生状态，它会在 依赖项改变时自动更新。

<script setup>
import { ref, computed } from 'vue';

const price = ref(100);
const quantity = ref(2);

// 计算总价
const total = computed(() => price.value * quantity.value);
</script>

<template>
  <p>单价：{{ price }}</p>
  <p>数量：{{ quantity }}</p>
  <p>总价：{{ total }}</p>
</template>

💡 计算属性是基于 缓存 的，只有在依赖变化时才会重新计算。

（4）watch – 监听数据变化

watch 用于 监听数据的变化，并在数据变化时执行某些操作。

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

// 监听 count 的变化
watch(count, (newValue, oldValue) => {
  console.log(`count 变化: ${oldValue} → ${newValue}`);
});
</script>

<template>
  <p>计数：{{ count }}</p>
  <button @click="count++">增加</button>
</template>

💡 watch() 适用于异步操作，如 API 请求、缓存等。

（5）watchEffect – 自动依赖追踪

watchEffect() 在 定义时立即执行，并自动收集依赖。

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`count 变化了: ${count.value}`);
});
</script>

<template>
  <p>计数：{{ count }}</p>
  <button @click="count++">增加</button>
</template>

💡 watchEffect() 自动跟踪依赖，适用于多个值的监听。

（6）生命周期钩子

Vue 3 生命周期钩子 允许我们在组件 创建、挂载、更新和销毁 时执行代码。

生命周期钩子作用
onBeforeMount组件挂载前
onMounted组件挂载后（DOM 已渲染）
onBeforeUpdate组件更新前
onUpdated组件更新后
onBeforeUnmount组件销毁前
onUnmounted组件销毁后

示例

<script setup>
import { onMounted, ref } from 'vue';

const message = ref('');

onMounted(() => {
  message.value = '组件已挂载！';
});
</script>

<template>
  <p>{{ message }}</p>
</template>

💡 onMounted() 常用于 API 请求、DOM 操作等。

（7）provide / inject – 依赖注入

provide 和 inject 允许 跨组件传递数据，适用于 祖孙组件通信。

父组件（提供数据）

<script setup>
import { provide, ref } from 'vue';

const message = ref('Hello from Parent');
provide('greeting', message);
</script>

<template>
  <ChildComponent />
</template>

子组件（接收数据）

<script setup>
import { inject } from 'vue';

const greeting = inject('greeting');
</script>

<template>
  <p>收到的消息：{{ greeting }}</p>
</template>

💡 provide/inject 适用于深层嵌套组件的数据共享。

（8）emits – 自定义事件

子组件可以使用 emit 向父组件传递事件。

子组件

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['increment']);

const handleClick = () => {
  emit('increment', 1);
};
</script>

<template>
  <button @click="handleClick">增加</button>
</template>

父组件

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const count = ref(0);

const incrementCount = (value) => {
  count.value += value;
};
</script>

<template>
  <p>计数：{{ count }}</p>
  <ChildComponent @increment="incrementCount" />
</template>

💡 emit 适用于父子组件通信。

总结

选项作用
data定义响应式数据（Vue 3 推荐 ref() 和 reactive()）
methods定义方法（Vue 3 推荐直接定义函数）
computed计算属性（有缓存，依赖变化时自动更新）
watch监听数据变化
watchEffect自动收集依赖并监听变化
setupVue 3 组合式 API 的入口
provide/inject祖孙组件通信
emits自定义事件
生命周期钩子组件的生命周期管理

Vue 3 推荐使用组合式 API (setup())，用 ref() 和 reactive() 代替 data，并在 setup() 内定义计算属性、监听器和方法，提升代码组织和复用性。🚀