Vue 3 核心 API 和函数
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)); // true
return { count };
},
};
（3）isReactive
-
作用：检查一个对象是否为响应式对象。
-
使用场景：判断变量是否为响应式对象。
-
示例：
import { reactive, isReactive } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
console.log(isReactive(state)); // true
return { 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)); // true
return { 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)); // true
console.log(isProxy(readOnlyState)); // true
return { 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 };
},
};