Vue3组合式API使用示例


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>

文章作者: Damao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Damao !
  目录