Vue3.0基础与实战技巧详解

在Vue3.0中，开发体验有了显著提升，引入了多个新特性，使得代码更加简洁、易维护。本文将深入探讨这些变化，并提供实践中的应用示例。 1. 组合API（Composition API） 组合API是Vue3的一个核心改进，它允许开发者将功能逻辑分解到可重用的函数中，提高了代码的模块化和可读性。例如，你可以创建一个自定义的`useCounter`函数，然后在不同组件中复用它来管理计数器状态： ```js import { ref } from 'vue'; function useCounter() { const count = ref(0); function increment() { count.value++; } function decrement() { count.value--; } return { count, increment, decrement }; } export default useCounter; ``` 2. `setup`函数 `setup`函数在组件实例创建之前执行，不直接访问`this`，而是通过`ref`和`reactive`等API来创建响应式数据。在`setup`中返回的对象将暴露给模板： ```js export default { setup(props, context) { const count = ref(0); return { count, increment() { count.value++; }, }; }, }; ``` 3. 定义响应式数据 - `ref`用于创建简单类型的响应式数据，如数字、字符串。例如，定义一个响应式的`count`变量： ```js const count = ref(0); ``` - `reactive`用于创建复杂类型的响应式对象，如对象或数组。例如，创建一个响应式的人对象： ```js const user = reactive({ name: 'Alice', age: 25, }); ``` 4. 计算属性（`computed`） 计算属性与Vue2类似，但不再需要`get`和`set`。只需定义一个函数，返回所需的结果： ```js const doubleCount = computed(() => count.value * 2); ``` 5. 侦听器（`watch`） Vue3的`watch` API更简洁，可以直接监听响应式数据的变化： ```js watch(count, (newCount, oldCount) => { console.log(`Count changed from ${oldCount} to ${newCount}`); }); ``` 6. 绑定组件实例和DOM元素（`ref`属性） Vue3中，`ref`属性的用法有所改变。对于单个元素，可以直接通过`ref`属性引用： ```vue <div ref="box">我是box</div> ``` 然后在`setup`中使用`onMounted`或`onUpdated`来访问： ```js import { onMounted } from 'vue'; onMounted(() => { console.log('box element:', box.value); }); ``` 对于`v-for`循环中的多个元素，`ref`会返回一个数组： ```vue <ul> <li v-for="i in 4" :key="i" ref="lis">{{ i }}</li> </ul> ``` 然后你可以通过数组索引来访问每个元素： ```js onMounted(() => { console.log('first li:', lis[0].value); }); ``` 7. Vue3中的通讯 Vue3通过`provide`和`inject`进行跨组件的数据传递，这对祖孙组件间的通信非常有用。祖组件使用`provide`提供数据，孙组件使用`inject`接收： ```js // 祖组件 provide('message', 'Hello from grandparent'); // 孙组件 const message = inject('message', 'Default message'); console.log(message); // 输出 "Hello from grandparent" ``` 8. `v-model`原理 Vue3中的`v-model`支持更多类型，可以通过自定义指令实现模型绑定。例如，创建一个自定义输入框组件： ```vue <template> <input :value="value" @input="onInput" /> </template> <script> export default { props: { value: [String, Number], }, emits: ['update:value'], methods: { onInput(event) { this.$emit('update:value', event.target.value); }, }, }; </script> ``` 以上只是Vue3.0部分基础知识和常见技巧的简要介绍，实际开发中，还有更多高级特性和最佳实践等待探索。例如，Vue3的模板语法优化、Teleport（传送门）功能、Suspense（延迟渲染）组件、Fragment（片段）支持以及错误处理等，都极大地丰富了Vue的生态，让开发者能够构建更加高效、灵活的应用。