vue3高阶方法及使用场景，看这一篇就够啦

不讲废话，直奔主题。

1. ref 和 reactive：

用法：

• ref 用于创建一个包装基本类型数据的响应式对象。
• reactive 用于创建一个包装复杂对象的响应式对象。

使用场景：

• ref 适用于简单数据类型，如数字、字符串等。
• reactive 适用于对象和数组等复杂数据结构。

示例：

import { ref, reactive } from 'vue';

const count = ref(0);
const user = reactive({
  name: 'John',
  age: 25
});

2. toRefs：

用法：

• 将响应式对象转换为包含 ref 的普通对象。

使用场景：

• 在解构对象时保持响应性。

示例：

import { reactive, toRefs } from 'vue';

const user = reactive({
  name: 'John',
  age: 25
});

const { name, age } = toRefs(user);

3. watch 和 watchEffect：

用法：

• watch 用于监听特定数据变化。
• watchEffect 自动追踪依赖关系的数据变化。

使用场景：

• watch 适用于有特定依赖关系的情况。
• watchEffect 适用于自动追踪数据变化的场景。

示例：

import { watch, watchEffect, ref } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

4. computed：

用法：

• 创建一个计算属性，当相关依赖发生变化时，重新计算属性的值。

使用场景：

• 衍生出一些与其他数据相关的衍生数据。

示例：

import { ref, computed } from 'vue';

const count = ref(0);

const squaredCount = computed(() => {
  return count.value * count.value;
});

5. provide 和 inject：

用法：

• provide 用于在父组件中提供数据。
• inject 用于在子组件中接收这些数据。

使用场景：

• 在跨层级组件中传递数据。

示例：

import { provide, inject } from 'vue';

const key = Symbol();

const ParentComponent = {
  setup() {
    provide(key, 'Data from parent');
  }
};

const ChildComponent = {
  setup() {
    const dataFromParent = inject(key);
    console.log(dataFromParent); // Output: 'Data from parent'
  }
};

6. shallowRef 和 shallowReactive：

用法：

• shallowRef 创建一个只对根层次的数据进行响应式处理的引用。
• shallowReactive 创建一个只对根层次的数据进行响应式处理的响应式对象。

使用场景：

• 当只需要对对象的根层次进行响应式处理时。

示例：

import { shallowRef, shallowReactive } from 'vue';

const shallowCount = shallowRef({ value: 0 });
const shallowUser = shallowReactive({ name: 'John', age: 25 });

7. customRef：

用法：

• customRef 允许你创建一个自定义的 ref，可以控制它的依赖追踪和通知更新。

使用场景：

• 需要自定义的 ref 行为，例如在 get 和 set 时执行特定逻辑。

示例：

import { customRef } from 'vue';

const customRefExample = customRef((track, trigger) => ({
  get() {
    track(); // 声明依赖
    return 'value';
  },
  set(value) {
    // 触发更新
    trigger();
  }
}));

8. markRaw 和 isRef：

用法：

• markRaw 用于标记一个对象，使其在创建 ref 时不被转换为响应式对象。
• isRef 用于检查一个值是否是 ref 对象。

使用场景：

• 在需要避免对象被转换为响应式对象时使用 markRaw。
• 在检查一个值是否为 ref 对象时使用 isRef。

示例：

import { ref, markRaw, isRef } from 'vue';

const rawObject = markRaw({ prop: 'value' });
const reactiveObject = ref(rawObject);

console.log(isRef(rawObject)); // false
console.log(isRef(reactiveObject)); // true

9. getCurrentInstance：

用法：

• getCurrentInstance 允许你在组件的 setup 函数中获取当前组件实例。

使用场景：

• 需要在 setup 函数中访问组件实例的属性和方法。

示例：

import { getCurrentInstance } from 'vue';

const MyComponent = {
  setup() {
    const instance = getCurrentInstance();
    console.log(instance.props); // 访问组件的 props
    console.log(instance.emit); // 访问组件的 emit 方法
  }
};

10. defineProps 和 defineEmits：

用法：

• 在 setup 函数中使用 defineProps 定义 props，使用 defineEmits 定义 emit 方法。

使用场景：

• 在使用 Composition API 时更明确地定义组件的 props 和 emit。

示例：

import { defineProps, defineEmits } from 'vue';

const MyComponent = {
  setup(props, context) {
    const { emit } = context;
    const { message } = defineProps(['message']);
    const onButtonClick = () => emit('button-clicked');

    return {
      message,
      onButtonClick
    };
  }
};

11. teleport：

用法：

• teleport 允许你将组件的内容渲染到 DOM 结构的其他位置。

使用场景：

• 创建弹出框或模态框，将内容渲染到 body 元素之外。

示例：

<template>
  <teleport to="body">
    <div>Teleported to body!</div>
  </teleport>
</template>

12. Suspense：

用法：

• Suspense 允许你在异步组件加载过程中显示备用内容。

使用场景：

• 在异步加载数据时，提供一个 loading 状态或备用内容。

示例：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

13. v-model 的修饰符支持：

用法：

• Vue 3 扩展了 v-model 的支持，现在你可以使用修饰符，如 .lazy 和 .trim。

使用场景：

• 对输入框的输入进行懒加载或去除首尾空格。

示例：

<template>
  <input v-model.lazy.trim="message" />
</template>

14. nextTick 函数：

用法：

• nextTick 函数允许你在 DOM 更新循环结束后执行回调。

使用场景：

• 在修改数据后，确保获取到最新的 DOM。

示例：

import { nextTick } from 'vue';

nextTick(() => {
  // DOM 更新完成后执行的代码
});

15. defineAsyncComponent：

用法：

• defineAsyncComponent 允许你以异步方式定义组件，方便按需加载组件。

使用场景：

• 在大型应用中，按需加载组件以提高性能。

示例：

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

16. defineCustomElement：

用法：

• defineCustomElement 允许你将 Vue 组件定义为自定义元素（Custom Element）。

使用场景：

• 在非 Vue 应用中使用 Vue 组件。

示例：

import { createApp, defineCustomElement } from 'vue';

const MyComponent = defineCustomElement({/* ... */});
const app = createApp(MyComponent);
app.component('my-component', MyComponent);
app.mount('#app');

17. v-model 的定制：

用法：

• 通过使用 model 选项来定制 v-model 的行为。

使用场景：

• 对于自定义组件的双向绑定，定义 v-model 的行为。

示例：

app.component('custom-input', {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event)" />
  `
});

18. teleport 和 Fragment 的简写：

用法：

• Vue 3 引入了对 Fragment 和 Teleport 的新的简写语法。

使用场景：

• 使模板更加简洁。

示例：

<!-- Fragment 简写 -->
<>
  <p>Content</p>
</>

<!-- Teleport 简写 -->
<teleport to="body">
  <div>Teleported to body!</div>
</teleport>

纯纯干货分享，创作不易，客官满意的话可以点赞关注支持一下小编嘛！