API一览
setup()
响应式: 核心
- ref() - 接受一个内部值,返回一个响应式的、可更改的 ref 对象
- computed () - 接受一个 getter 函数,返回一个只读的响应式 ref 对象(计算属性)
- reactive() - 返回一个对象的响应式代理
- readonly() - 接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理
- watchEffect() - 立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行
- watchPostEffect() - watchEffect() 使用 flush: ‘post’ 选项时的别名
- watchSyncEffect() - watchEffect() 使用 flush: ‘sync’ 选项时的别名
- watch() - 侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数
响应式: 工具
- isRef() - 检查某个值是否为 ref
- unref() - 如果参数是 ref,则返回内部值,否则返回参数本身
- toRef() - 基于响应式对象上的一个属性,创建一个对应的 ref
- toRefs() - 将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref
- isProxy() - 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理
- isReactive() - 检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理
- isReadonly() - 检查一个对象是否是由 readonly() 或 shallowReadonly() 创建的代理
响应式: 进阶
- shallowRef() - ref() 的浅层作用形式
- triggerRef() - 强制触发依赖于一个浅层 ref 的副作用,这通常在对浅引用的内部值进行深度变更后使用
- customRef() - 创建一个自定义的 ref,显式声明对其依赖追踪和更新触发的控制方式
- shallowReactive() - reactive() 的浅层作用形式
- shallowReadonly() - readonly() 的浅层作用形式
- toRaw() - 根据一个 Vue 创建的代理返回其原始对象
- markRaw() - 将一个对象标记为不可被转为代理。返回该对象本身
- effectScope() - 创建一个 effect 作用域,可以捕获其中所创建的响应式副作用 (即计算属性和侦听器),这样捕获到的副作用可以一起处理
- getCurrentScope() - 如果有的话,返回当前活跃的 effect 作用域
- onScopeDispose() - 在当前活跃的 effect 作用域上注册一个处理回调函数
生命周期钩子
- onMounted() - 组件挂载完成后执行
- onUpdated() - 更新 DOM 树之后调用
- onUnmounted() - 组件实例被卸载之后调用
- onBeforeMount() - 组件被挂载之前被调用
- onBeforeUpdate() - 更新 DOM 树之前调用
- onBeforeUnmount() - 组件实例被卸载之前调用
- onErrorCaptured() - 捕获了后代组件传递的错误时调用
- onRenderTracked() - 组件渲染过程中追踪到响应式依赖时调用
- onRenderTriggered() - 响应式依赖的变更触发了组件渲染时调用
- onActivated() - 若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用
- onDeactivated() - 若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用
- onServerPrefetch() - 组件实例在服务器上被渲染之前调用
依赖注入
- provide() - 提供一个值,可以被后代组件注入
- inject() - 注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值
使用示例
<script setup lang="ts">
import { ref, Ref, reactive, isRef, unref, toRef, computed } from 'vue';
const msg = ref("Hello World");
const initial = ref(10);
const count = ref(0);
// 更新 ref
function update(value) {
count.value = value;
}
// 检查`count`是否为一个 ref 对象
console.log(isRef(count) ? '是ref对象' : '非ref对象');
// 如果参数是一个ref,则返回内部值,否则返回参数本身
function initialCount(value: number | Ref<number>) {
console.log(unref(value) === 10); // 打印true
}
initialCount(initial);
/**
* 为源响应式对象上的某个 `property` 新创建一个 `ref`。
* 然后,`ref` 可以被传递,它会保持对其源`property`的响应式连接。
* 确保以下输出为true
*/
const state = reactive({
foo: 1,
bar: 2,
});
const fooRef = toRef(state, 'foo');
// 修改引用将更新原引用
fooRef.value++;
console.log(state.foo === 2); // 打印true
// 修改原引用也会更新`ref`
state.foo++;
console.log(fooRef.value === 3); // 打印true
//computed 接受一个具有 get 和 set 函数的对象,用来创建可写的 ref 对象。
const plusOne = computed({
get: ()=>{
return count.value + 1;
},
set: val=>{
count.value ++;
}
})
plusOne.value++;
</script>
<template>
<div>
<h1>{{msg}}</h1>
<p>
<span @click="update(count - 1)">-</span>
{{ count }}
<span @click="update(count + 1)">+</span>
</p>
<p>
count:{{ count }},plusOne:{{ plusOne }}
</p>
</div>
</template>