一、基础函数&特性
1. setup() 函数
- 作用：
setup()是Vue 3引入的一个新的组件选项，用于定义组件的逻辑。它在组件初始化阶段被调用，替代了Vue 2中的data、methods等选项。 - 特点：
- 接收
props和context作为参数。 - 返回的对象将被合并到组件的渲染上下文中。
- 可以使用Composition API函数来组织逻辑。
- 接收
- 使用示例:
import { ref } from 'vue' export default { setup(props, context) { const count = ref(0) const increment = () => { count.value++ } return { count, increment } } }
2. ref() 函数
- 作用：用于创建一个响应式的引用对象，可以用来包裹基本类型值或对象，使其能够在模板中响应式更新。
- 用法:
const count = ref(0) - 特点：
.value属性访问实际值，适合简单的数据绑定。
3. reactive() 函数
- 作用：用于创建一个响应式对象，适用于更复杂的对象或数组结构。
- 用法:
const state = reactive({ count: 0 }) - 特点：直接修改对象属性即可触发视图更新，适合有多个状态属性的情况。
4. computed() 函数
- 作用：创建计算属性，基于依赖项自动缓存结果。
- 用法:
const doubleCount = computed(() => state.count * 2) - 特点：只有当依赖项改变时才会重新计算。
5. watch() 函数
- 作用：监视数据变化并执行回调。
- 用法:
watch(count, (newValue, oldValue) => { console.log(`count changed from ${oldValue} to ${newValue}`) }) - 特点：支持异步处理，可以有多种配置选项。
6. watchEffect() 函数
- 作用：类似于
watch()，但自动追踪依赖项并执行回调。 - 用法:
watchEffect(() => { console.log(`count is now ${count.value}`) }) - 特点：不需要显式指定依赖，每次依赖变化都会执行。
7. toRef() 和 toRefs()
- 作用：将响应式对象的属性转换为独立的
ref，便于在模板或逻辑中单独使用。 - 用法:
const stateRef = reactive({ count: 0 }) const countRef = toRef(stateRef, 'count') - 特点：方便解构和传递响应式对象的单个属性。
8. onBeforeMount(), onMounted(), onBeforeUpdate(), onUpdated(), onUnmounted() 等生命周期钩子
- 作用：Vue 3通过Composition API提供了新的生命周期钩子函数，用于在组件的不同生命周期阶段执行代码。
- 用法:
onMounted(() => { console.log('Component mounted.') }) - 特点：更细粒度的控制，可以组合使用。
9. provide() 和 inject()
- 作用：用于祖先组件向后代组件注入数据，实现跨级组件通信。
- 用法:
// 祖先组件 provide('theme', 'dark') // 子孙组件 const theme = inject('theme') - 特点：简化了状态管理和跨组件共享数据的方式。
10. 自定义渲染函数 render()
- 作用：提供完全控制渲染逻辑的能力，用于替代模板语法。
- 用法:
export default { render() { return h('div', {}, 'Hello World!') } } - 特点：高度灵活，适合复杂UI或动态生成DOM结构。
二、核心宏函数（单文件组件方向）
在Vue 3中，引入了Composition API来提供一种更灵活和强大的方式来组织组件逻辑。其中，defineProps、defineEmits、defineExpose、defineSlots 和 defineOptions 是几个核心宏函数，用于定义组件的不同方面。
1. defineProps
- 作用：用于在
<script setup>块中定义组件接收的属性(props)。它允许你指定每个prop的类型、默认值等。 - 使用方式：
import { defineProps } from 'vue'; defineProps({ message: { type: String, required: true }, count: Number }); - 特点：在
<script setup>中不需要显式导入，直接使用即可，是编译时的语法糖。
2. defineEmits
- 作用：用于在
<script setup>块中声明组件可以向外发出的事件(emits)。它帮助你定义组件间通信的事件接口。 - 使用方式：
import { defineEmits } from 'vue'; const emit = defineEmits(['update:modelValue']); function updateValue(newValue) { emit('update:modelValue', newValue); } - 特点：同样，在
<script setup>中无需导入，直接使用，提供事件名称的类型检查。
3. defineExpose
- 作用：在
<script setup>中用于公开组件内部的一些方法或属性给使用该组件的父组件或其他外部环境。 - 使用方式：
import { defineExpose } from 'vue'; const internalMethod = () => { /* 内部逻辑 */ }; defineExpose({ publicMethod: internalMethod }); - 特点：允许组件作者有选择地公开内部实现，保持组件内部的封装性。
4. defineSlots
- 注意：在Vue 3中，并没有直接的
defineSlots宏函数。Vue 3采用模板语法来处理插槽内容，如默认插槽、具名插槽等，通常不需要特殊声明。但在Composition API中，你可以直接通过useSlots()函数来访问插槽内容。 - 使用方式（非宏函数，但提及
useSlots作为替代）：import { useSlots } from 'vue'; const slots = useSlots(); console.log(slots.default?.()); // 访问默认插槽 console.log(slots.namedSlot?.()); // 访问具名插槽
5. defineOptions
- 作用：用于在
<script setup>块中定义组件的选项，如名称(name)、继承(inheritAttrs)、模型(options.model)等。 - 使用方式：
import { defineOptions } from 'vue'; defineOptions({ name: 'MyComponent', inheritAttrs: false }); - 特点：允许在Composition API中设置组件的元数据和配置，增强了配置的灵活性。
三、全局API
1. createApp()
- 功能：用于创建一个新的Vue应用实例。这是启动一个Vue应用的入口点，通常用于客户端渲染。
- 用法：
const app = createApp(App); app.mount('#app'); - 参数：接收一个Vue组件作为参数，即应用的根组件。
2. createSSRApp()
- 功能：用于创建一个专用于服务器端渲染（SSR）的Vue应用实例。与
createApp类似，但针对SSR做了特别优化。 - 用法：
import { createSSRApp } from 'vue'; import App from './App.vue'; export function createServerApp() { return createSSRApp(App); } - 适用场景：主要用于构建支持服务器端渲染的应用。
3. app.mount()
- 功能：将创建的Vue应用挂载到指定的DOM元素上，开始渲染组件。
- 用法：
app.mount('#app'); - 参数：接收一个选择器字符串或者DOM元素作为参数，表示挂载的目标节点。
4. app.unmount()
- 功能：卸载Vue应用，清理应用实例及其所有的组件和事件监听器。
- 用法：
app.unmount(); - 应用场景：当需要移除整个应用时使用，比如切换路由时卸载当前应用以便加载新应用。
5. app.component()
- 功能：全局注册一个组件，使其可以在应用中的任何地方使用。
- 用法：
app.component('MyComponent', MyComponent); - 参数：接收两个参数，第一个是组件名，第二个是组件的定义。
6. app.directive()
- 功能：全局注册一个自定义指令。
- 用法：
app.directive('my-directive', { mounted(el, binding, vnode) { // 指令逻辑 } }); - 参数：指令名和指令定义对象。
7. app.use()
- 功能：安装一个插件。插件可以是用于全局注册组件、指令、混入、提供全局方法等的函数。
- 用法：
app.use(myPlugin); - 参数：插件函数，通常接收应用实例作为参数。
8. app.provide()
- 功能：在应用层级提供一个值，使其可以在整个组件树中通过
inject访问。 - 用法：
app.provide('service', myService);
9. app.runWithContext()
- 功能：在特定上下文中运行一个函数，这个API主要用于Vue的内部机制，对外部开发者的直接使用较少。
10. app.version
- 功能：提供Vue的版本信息，是一个只读属性。
11. app.config
- 功能：全局配置对象，用于修改Vue的行为。包括但不限于错误处理、警告处理、性能追踪、编译选项、全局属性、选项合并策略等。
配置项示例：
app.config.errorHandler：全局错误处理函数。app.config.warnHandler：全局警告处理函数。app.config.performance：开启性能追踪。app.config.compilerOptions：自定义Vue模板编译器选项。app.config.globalProperties：添加全局属性，使得所有组件都能访问。app.config.optionMergeStrategies: 自定义选项合并策略，用于控制Vue如何合并组件选项。
