1. 响应式系统
（1）ref
-
作用：创建一个响应式的引用（通常用于基本类型数据）。
-
使用场景：管理单个响应式数据。
-
示例：
import { ref } from 'vue';export default {setup() {const count = ref(0); // 创建一个响应式引用return { count };},
};（2）reactive
-
作用：创建一个响应式对象（通常用于对象或数组）。
-
使用场景：管理复杂的响应式数据。
-
示例：
import { reactive } from 'vue';export default {setup() {const state = reactive({ count: 0, name: 'Vue' });return { state };},
};3. toRefs
-
作用：将响应式对象的属性转换为
ref，以便在模板中解构使用。 -
使用场景：解构响应式对象时保持响应性。
-
示例：
import { shallowRef } from 'vue';export default {setup() {const state = shallowRef({ count: 0 }); // 只有 state.value 是响应式的return { state };},
};（4）markRaw
-
作用：标记一个对象为“非响应式”，使其不会被转换为响应式对象。
-
使用场景：当明确不需要某个对象被 Vue 的响应式系统追踪时使用。
-
示例：
import { reactive, markRaw } from 'vue';export default {setup() {const rawObject = markRaw({ count: 0 }); // 标记为非响应式const state = reactive({ data: rawObject }); // data 不会被转换为响应式return { state };},
};（5）toRaw
-
作用：返回一个响应式对象的原始对象（非响应式版本）。
-
使用场景：需要访问响应式对象的原始数据时使用。
-
示例：
import { reactive, toRaw } from 'vue';export default {setup() {const state = reactive({ count: 0 });const rawState = toRaw(state); // 获取原始对象return { state, rawState };},
};（6）readonly
-
作用：创建一个只读的响应式对象，不能修改其属性。
-
使用场景：防止意外修改数据。
-
示例：
import { reactive, readonly } from 'vue';export default {setup() {const state = reactive({ count: 0 });const readOnlyState = readonly(state); // 创建只读对象return { state, readOnlyState };},
};（7）customRef
-
作用：创建一个自定义的
ref，可以控制其依赖追踪和更新触发。 -
使用场景：需要自定义
ref的行为时使用。 -
示例：
import { customRef } from 'vue';export default {setup() {const myRef = customRef((track, trigger) => {let value = 0;return {get() {track(); // 追踪依赖return value;},set(newValue) {value = newValue;trigger(); // 触发更新},};});return { myRef };},
};（8）triggerRef
-
作用：手动触发一个
shallowRef的更新。 -
使用场景：当使用
shallowRef时，需要手动触发更新。 -
示例：
import { shallowRef, triggerRef } from 'vue';export default {setup() {const state = shallowRef({ count: 0 });const increment = () => {state.value.count++; // 修改内部值triggerRef(state); // 手动触发更新};return { state, increment };},
};2. 依赖注入
（1）provide 和 inject
-
作用：实现跨层级组件通信。
-
使用场景：父组件向子孙组件传递数据。
-
示例：
// 父组件
import { provide, ref } from 'vue';export default {setup() {const count = ref(0);provide('count', count); // 提供数据return { count };},
};// 子组件
import { inject } from 'vue';export default {setup() {const count = inject('count'); // 注入数据return { count };},
};3. 计算属性和侦听器
（1）computed
-
作用：创建一个计算属性。
-
使用场景：基于响应式数据派生出新的数据。
-
示例：
import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const doubleCount = computed(() => count.value * 2); // 计算属性return { count, doubleCount };},
};（2）watch
-
作用：监听响应式数据的变化，并在变化时执行回调。
-
使用场景：监听数据变化并执行副作用。
-
示例：
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);});return { count };},
};（3）watchEffect
-
作用：立即执行回调，并自动追踪回调中使用的响应式数据，当数据变化时重新执行回调。
-
使用场景：监听多个响应式数据的变化。
-
示例：
import { ref, watchEffect } from 'vue';export default {setup() {const count = ref(0);watchEffect(() => {console.log(`count is ${count.value}`);});return { count };},
};4. 生命周期钩子
（1）onBeforeMount
-
作用：在组件挂载之前执行。
-
示例：
import { onBeforeMount } from 'vue';export default {setup() {onBeforeMount(() => {console.log('组件即将挂载');});},
};（2）onMounted
-
作用：在组件挂载之后执行。
-
示例：
import { onMounted } from 'vue';export default {setup() {onMounted(() => {console.log('组件已挂载');});},
};（3）onBeforeUpdate
-
作用：在组件更新之前执行。
-
示例：
import { onBeforeUpdate } from 'vue';export default {setup() {onBeforeUpdate(() => {console.log('组件即将更新');});},
};（4）onUpdated
-
作用：在组件更新之后执行。
-
示例：
import { onUpdated } from 'vue';export default {setup() {onUpdated(() => {console.log('组件已更新');});},
};（5）onBeforeUnmount
-
作用：在组件卸载之前执行。
-
示例：
import { onBeforeUnmount } from 'vue';export default {setup() {onBeforeUnmount(() => {console.log('组件即将卸载');});},
};（6）onUnmounted
-
作用：在组件卸载之后执行。
-
示例：
import { onUnmounted } from 'vue';export default {setup() {onUnmounted(() => {console.log('组件已卸载');});},
};5. 工具函数
（1）h 函数
-
作用：用于创建虚拟 DOM 节点（VNode）。
-
使用场景：在渲染函数或 JSX 中手动创建虚拟 DOM。
-
示例：
import { h } from 'vue';export default {render() {return h('div', { class: 'container' }, 'Hello, Vue 3!');},
};（2）isRef
-
作用：检查一个值是否为
ref对象。 -
使用场景：判断变量是否为
ref。 -
示例：
import { ref, isRef } from 'vue';export default {setup() {const count = ref(0);console.log(isRef(count)); // truereturn { count };},
};
（3）isReactive
-
作用：检查一个对象是否为响应式对象。
-
使用场景：判断变量是否为响应式对象。
-
示例：
import { reactive, isReactive } from 'vue';export default {setup() {const state = reactive({ count: 0 });console.log(isReactive(state)); // truereturn { state };},
};（4）isReadonly
-
作用：检查一个对象是否为只读的响应式对象。
-
使用场景：判断变量是否为只读对象。
-
示例：
import { reactive, readonly, isReadonly } from 'vue';export default {setup() {const state = reactive({ count: 0 });const readOnlyState = readonly(state);console.log(isReadonly(readOnlyState)); // truereturn { state, readOnlyState };},
};（5）isProxy
-
作用：检查一个对象是否为代理对象（即
reactive或readonly创建的对象）。 -
使用场景：判断变量是否为代理对象。
-
示例：
import { reactive, readonly, isProxy } from 'vue';export default {setup() {const state = reactive({ count: 0 });const readOnlyState = readonly(state);console.log(isProxy(state)); // trueconsole.log(isProxy(readOnlyState)); // truereturn { state, readOnlyState };},
};（6）effectScope
-
作用：创建一个作用域，用于管理一组副作用（如
watch和computed）。 -
使用场景：需要集中管理副作用时使用。
-
示例：
import { effectScope, ref, watch } from 'vue';export default {setup() {const scope = effectScope(); // 创建作用域scope.run(() => {const count = ref(0);watch(count, () => {console.log('count changed');});});return {};},
};6. 组件定义
（1）defineComponent
-
作用：定义一个 Vue 组件（提供更好的 TypeScript 支持）。
-
使用场景：定义组件时使用。
-
示例：
import { defineComponent } from 'vue';export default defineComponent({setup() {return {};},
});7. 异步更新
（1）nextTick
-
作用：在下次 DOM 更新循环结束后执行回调。
-
使用场景：等待 DOM 更新后执行操作。
-
示例：
import { ref, nextTick } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;nextTick(() => {console.log('DOM updated');});};return { count, increment };},
};
