Vue3的发布标志着这个流行前端框架的重大升级。其中Zui引人注目的变化是引入了Composition API,它为开发者提供了一种全新的组织组件逻辑的方式。说实话，这个新特性真心强大，咱就是说以前的Options API在处理复杂组件时简直让人头大。

Composition API Zui大的优势在于逻辑复用。哈哈，你懂的，我们Ke以将相关逻辑封装成组合式函数。这样一来代码不仅geng简洁，而且geng容易维护。

import { useCounter } from './composables/useCounter' export default { setup { const { count, double, increment, decrement } = useCounter return { count, double, increment, decrement } } } 示例：useFetch

来kankan一个实际的例子，比如我们常用的数据获取功Neng。

// composables/useFetch.js import { ref, onMounted } from 'vue' export function useFetch { const data = ref const loading = ref const error = ref const fetchData = async => { try { loading.value = true const response = await fetch data.value = await response.json } catch { error.value = err.message } finally { loading.value = false } } onMounted => { fetchData }) return { data, loading, error, refresh: fetchData } }

为啥要这样Zuo呢？因为这样Ke以实现逻辑的高度复用，你Ke以在多个组件中直接调用useFetch，而不必重复写相同的逻辑代码。害，这效率简直不要太高！

Vue3引入了 <script setup>，让 Composition API 用起来geng加简洁。你kan，这代码一下子变得多干净！

<script setup> import { ref, computed, onMounted } from 'vue' const count = ref const doubleCount = computed => count.value * 2) const increment = => count.value++ onMounted => { console.log }) </script> <template> <div> <p>{{ count }}</p> <p>{{ doubleCount }}</p> <button @click="increment">增加</button> </div> </template>

顺便说一下有人问我“为什么百度不收录”我的网站页面其实主要原因是网站内容质量、结构化数据、robots.txt配置等多个因素导致的。不对不对，应该是网站是否被充分爬取和索引的问题。你Ke以检查下网站的meta标签，确保没有误设noindex或者nofollow。

ref 用于创建响应式的基本类型值，比如数字、字符串等。

import { ref } from 'vue' const count = ref // 访问和修改 console.log // count.value = 1 // 在模板中自动解包，不需要 .value . watch 和 watchEffect

watch - 精确监听：

import { ref, watch } from 'vue' const count = ref // 监听单个值 watch => { console.log })

watchEffect - 自动追踪依赖：

import { ref, watchEffect } from 'vue' const count = ref watchEffect => { // 自动追踪 count 的变化 console.log }) Zui佳实践 . 逻辑组织

将相关的逻辑组织在一起，这样不仅方便维护，而且一目了然。

Vue3 Composition API 为我们提供了geng灵活、geng强大的组件开发方式。通过合理使用refcomputedwatch等API，我们Ke以写出geng易维护、geng具可读性的代码。说实话，这对于大型项目的开发来说简直是福音！你觉得呢？