Vue3基础知识点速记图解

Vue3 是一款流行的前端JavaScript框架，由尤雨溪开发，旨在简化Web应用的构建。相较于Vue2，Vue3引入了许多新特性和优化，为开发者带来了更高效、更灵活的开发体验。以下是一些Vue3的基础知识点，对于初学者来说尤其重要。 ### 1. Composition API Vue3 引入了Composition API，它允许开发者将组件的功能拆分为可复用的函数，提高了代码的可读性和可维护性。例如，`setup()`函数是Composition API的核心，用于在组件实例创建之前初始化数据、计算属性和监听器。 ```js export default { setup(props, context) { // 在这里初始化数据、计算属性和响应式依赖 } } ``` ### 2. TypeScript 支持 Vue3全面支持TypeScript，提供了类型定义，使开发过程中可以享受到强类型语言带来的好处，如代码提示和错误检查。通过使用`.vue`文件中的`<script lang="ts">`，可以在单文件组件中直接使用TypeScript。 ### 3. Refs & Refs数组 在Vue3中，`ref`被用来创建一个响应式的引用，可以直接获取到值并改变。而`ref`数组可以方便地管理一组响应式引用。 ```js import { ref } from 'vue'; const count = ref(0); ``` ### 4. Computed与Watch的区别 Vue3中，`computed`和`watch`都有了新的实现。`computed`依然用于创建计算属性，而`watch`现在变成了一个函数，可以监听任何表达式的变化。 ```js // computed const doubleCount = computed(() => count.value * 2); // watch watch(count, (newVal, oldVal) => { console.log(`Count changed from ${oldVal} to ${newVal}`); }); ``` ### 5. 响应式原理 - Proxy Vue3利用了ES6的Proxy来实现数据的响应式，相比于Vue2中的Object.defineProperty，Proxy能更智能地监听对象及其所有属性的变化。 ### 6. Provide/Inject Vue3改进了`provide`和`inject`，使得父组件可以直接向子组件提供数据，无需通过props逐级传递。这在处理深层嵌套组件或插件时非常有用。 ```js // 父组件 provide('count', count.value); // 子组件 const count = inject('count'); ``` ### 7.模板语法更新 Vue3模板中，`.sync`修饰符被移除，取而代之的是`v-model`的多向绑定。此外，`v-for`的`key`属性现在是必须的。 ```html <!-- Vue2 --> <input v-model.sync="message"> <!-- Vue3 --> <input v-model="message"> ``` ### 8.Suspense组件 Vue3新增了`<Suspense>`组件，用于在组件渲染完成前显示占位符或加载指示符，这对于优化用户体验特别有用。 ```html <Suspense> <template #default> <!-- 当组件还没准备好时，显示的内容 --> </template> <template #fallback> <!-- 组件正在加载时，显示的内容 --> </template> <AsyncComponent /> </Suspense> ``` ### 9. Fragment和Teleport Vue3引入了`<Fragment>`，允许在模板中创建无根节点的结构，解决了Vue2中不能直接使用多个根元素的问题。同时，`<Teleport>`组件可以将内容渲染到DOM的指定位置，这对于解决某些布局问题非常有帮助。 ```html <template> <Fragment> <h1>Header</h1> <p>Content</p> </Fragment> <Teleport to="#modal"> <div>Modal Content</div> </Teleport> </template> ``` ### 10. 全局API的变化 Vue3对许多全局API进行了调整，如`Vue.component`变为`app.component`，`Vue.use`变为`app.use`，这些变化使得API更符合面向对象编程的风格。 ```js // Vue2 Vue.component('my-component', MyComponent); // Vue3 const app = createApp(App); app.component('my-component', MyComponent); ``` 以上只是Vue3众多新特性的一部分，实际学习过程中，你还需要了解`setup`中的`return`、`emit`的使用、`Suspense`组件的深入理解、以及如何在项目中逐步迁移Vue2到Vue3等知识点。通过深入学习和实践，你将能熟练掌握Vue3的精髓，并能有效地构建高性能的Web应用。