Vue 3 API 盲点

Vue 3 的主要特性

在深入了解 Vue 3 的 API 之前，我们先来回顾一下 Vue 3 的主要特性。Vue 3 带来了许多新特性和改进，包括但不限于：

• Composition API

• Teleport

•  Fragments

•  Suspense

•  TypeScript Support

•  emits

•  provide 和 inject

Composition API

Composition API 是 Vue 3 中引入的一种新的代码组织方式。它可以让我们更好地组织和复用代码，尤其是在大型项目中。主要的 Composition API 包括 setup 函数、ref、reactive、computed 和 watch。

setup 函数

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

1. 需要在非单文件组件中使用组合式 API 时。
2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

示例代码1：正常使用

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

注意

对于结合单文件组件使用的组合式 API，推荐通过 <script setup> 以获得更加简洁及符合人体工程学的语法。

示例代码2：简洁语法

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

ref

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

示例代码1:template中使用

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');
</script>

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

示例代码2：setuo中使用

<script setup>
const count = ref(0)
console.log(count.value) // 0

count.value = 1
console.log(count.value) // 1
</script>

reactive

reactive 用来定义一个响应式的对象，它只能用来定义对象类型的值。

示例代码

<template>
  <div>{{ user.name }}</div>
</template>

<script setup>
import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 25
});
</script>

computed

computed 用来定义计算属性，它会根据依赖的值自动更新。

示例代码

<template>
  <div>{{ fullName }}</div>
</template>

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

watch

watch 用来监听响应式数据的变化，并执行相应的回调。

示例代码

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

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

setInterval(() => {
  count.value++;
}, 1000);
</script>

 

Teleport

Teleport 是 Vue 3 引入的一种新的组件，它可以将组件的内容渲染到 DOM 树中的指定位置。

示例代码：弹窗插入到body节点下

<template>
  <button @click="open = true">Open Modal</button>
  <teleport to="body">
    <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
  </teleport>
</template>

<script setup>
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

Fragments

在 Vue 3 中，组件可以返回多个根节点，这就是 Fragments 的概念。它可以减少不必要的 DOM 包装元素。

示例代码：组件中多个根节点

<template>
 
    <header>Header</header>
    <main>Main Content</main>
    <footer>Footer</footer>
 
</template>

<script setup>
</script>

Suspense

Suspense 组件用于处理异步组件加载时的占位符显示，可以极大地提升用户体验。

示例代码：异步组件加载时占位

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

<script setup>
import { defineAsyncComponent } from 'vue';

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

 TypeScript 支持

Vue 3 对 TypeScript 的支持得到了极大改进，使得开发者可以更轻松地在项目中使用 TypeScript。

示例代码

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      count: 1
    }
  }
})
</script>

<template>
  <!-- 启用了类型检查和自动补全 -->
  {{ count.toFixed(2) }}
</template>

lang="ts" 也可以用于 <script setup>：

<script setup lang="ts">
// 启用了 TypeScript
import { ref } from 'vue'

const count = ref(1)
</script>

<template>
  <!-- 启用了类型检查和自动补全 -->
  {{ count.toFixed(2) }}
</template>

emits

emits 选项用于声明组件中可以触发的事件。

示例代码

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['customEvent']);

const handleClick = () => {
  emit('customEvent', 'Hello, Vue 3!');
};
</script>

provide 和 inject

provide 和 inject 用于在组件树中传递数据，避免了通过 props 层层传递的麻烦。

示例代码

Parent.vue

<template>
  <Child />
</template>

<script setup>
import { provide } from 'vue';
import Child from './Child.vue';

provide('message', 'Hello from Parent!');
</script>

Child.vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { inject } from 'vue';

const message = inject('message');
</script>

从 Composition API 到 Teleport，从 Fragments 到 Suspense，再到 TypeScript Support，emits，provide和inject，我们深入了解了 Vue 3 带来的种种改进和新特性。

希望这篇文章能够帮助你更好地理解和掌握 Vue 3，提升开发效率，写出更加高效、优雅的代码。