当前位置： 首页 > news >正文

三站一体网站制作,3d建模视频教学,免费的招标网有哪些,好的h5制作网站模板下载文章目录 前言一、Vue3简介官网地址主要特点 二、安装与创建Vue3项目使用Vue CLI创建项目使用Vite创建项目 三、Composition API详解Setup函数ref与Reactive生命周期钩子计算属性和监听器 四、新特性与优化响应式系统更好的TypeScript支持类型定义类型推断新组件全局API重构更好… 文章目录 前言一、Vue3简介官网地址主要特点 二、安装与创建Vue3项目使用Vue CLI创建项目使用Vite创建项目 三、Composition API详解Setup函数ref与Reactive生命周期钩子计算属性和监听器 四、新特性与优化响应式系统更好的TypeScript支持类型定义类型推断新组件全局API重构更好的测试支持 五、实战案例结语 前言 Vue.js 是一款用于构建用户界面的渐进式JavaScript框架。自Vue2推出以来其简洁优雅的API设计、轻量级的特性以及出色的性能表现赢得了广大开发者的好评。随着前端技术的快速发展Vue3应运而生带来了众多令人兴奋的新特性和改进。本文旨在全面介绍Vue3的核心概念、新特性以及如何将其应用于实际项目中。 一、Vue3简介 Vue3是Vue.js框架的第三个主要版本于2020年9月18日正式发布。相较于Vue2Vue3在多个方面实现了显著的提升。 官网地址 https://cn.vuejs.org/ 主要特点 性能优化Vue3利用现代JavaScript特性如Proxy在保持现有API的同时提升了应用的运行效率。体积减小通过更精细的模块化设计和Tree Shaking支持Vue3的初始加载时间更快最终包体积更小。TypeScript支持Vue3原生支持TypeScript使得类型安全性和开发体验得到了极大的提升。Composition APIVue3引入了一种全新的API设计模式——Composition API它允许开发者更灵活地组织和复用逻辑代码。更好的测试支持Vue3提供了一系列工具和库使得单元测试和端到端测试更加便捷。 二、安装与创建Vue3项目 使用Vue CLI创建项目 Vue CLI 是Vue.js的官方脚手架工具可以帮助开发者快速搭建项目。要创建一个Vue3项目首先需要确保已安装最新版本的Vue CLI。可以通过以下命令检查或安装

检查Vue CLI版本

vue –version# 如果版本低于4.5.0请更新 npm install -g vue/cli然后使用Vue CLI创建一个新的Vue3项目 vue create my-vue3-project在创建过程中选择Vue 3预设或者手动选择特性确保选择了Vue 3版本。 使用Vite创建项目 Vite 是由Vue.js作者尤雨溪开发的一款现代化的前端构建工具它利用浏览器原生的ES模块导入功能实现了快速启动和按需编译非常适合Vue3项目。创建一个基于Vite的Vue3项目只需几行命令 npm init vitelatest my-vue3-project –template vue cd my-vue3-project npm install npm run dev三、Composition API详解 Setup函数 Composition API的核心是setup函数它替代了Vue2中的data、methods、computed等选项。setup函数在组件实例初始化之前调用可以接收组件的props和context作为参数并且必须返回一个对象该对象中的属性和方法可以在模板中直接使用。 export default {props: {message: String},setup(props, context) {// 组件逻辑…return {// 需要在模板中使用的属性和方法}} }ref与Reactive Vue3中提供了两种方式来创建响应式数据ref和reactive。 ref用于创建一个响应式的引用对象可以用来包裹任何类型的值。在模板中使用时不需要.value后缀。reactive用于创建一个深层响应式的对象。对于对象类型的数据推荐使用reactive。 import { ref, reactive } from vue// 使用ref let count ref(0)// 使用reactive let state reactive({name: Vue,count: 0 })// 在setup函数中使用 export default {setup() {let count ref(0)let state reactive({name: Vue,count: 0})function increment() {count.valuestate.count}return {count,state,increment}} }生命周期钩子 Vue3中的生命周期钩子名称有所变化但它们的功能和使用方式与Vue2相似。Vue3提供了新的生命周期钩子函数如onMounted、onUnmounted等。 import { onMounted, onUnmounted } from vueexport default {setup() {onMounted(() {console.log(组件已挂载)})onUnmounted(() {console.log(组件已卸载)})// …} }计算属性和监听器 Vue3中计算属性和监听器也有了新的API。 计算属性使用computed函数创建。监听器使用watch函数创建。 import { ref, computed, watch } from vueexport default {setup() {let count ref(0)// 计算属性let doubleCount computed(() count.value * 2)// 监听器watch(count, (newVal, oldVal) {console.log(count changed from \({oldVal} to \){newVal})})return {count,doubleCount}} }四、新特性与优化 响应式系统 Vue3的响应式系统基于ES6的Proxy对象相比Vue2的Object.defineProperty方法它能够更高效地处理对象属性的添加和删除操作同时避免了数组索引更改不触发更新的问题。 更好的TypeScript支持 Vue3提供了更好的TypeScript支持包括类型推断和类型检查这使得使用TypeScript开发Vue应用变得更加容易。 类型定义 Vue3提供了详细的类型定义文件可以通过安装vue/runtime-dom来获取这些类型定义。 npm install vue/runtime-dom类型推断 Vue3中的ref和reactive函数会自动推断类型。 import { ref, reactive } from vuelet count ref(0) // count的类型为Refnumber let state reactive({ name: Vue }) // state的类型为{ name: string }新组件 Vue3引入了几个新的内置组件如Fragment、Teleport和Suspense它们分别解决了多根节点、DOM结构优化和异步组件加载的问题。 Fragment允许在一个组件中返回多个根节点。templateFragmenth1Title/h1pContent/p/Fragment /templateTeleport允许将模态框或其他组件的内容渲染到DOM树的任意位置。templatebutton clickopenModalOpen Modal/buttonTeleport tobodydiv v-ifisModalOpen classmodalpThis is a modal/pbutton clickcloseModalClose/button/div/Teleport /templatescript import { ref } from vueexport default { setup() {let isModalOpen ref(false)function openModal() {isModalOpen.value true} function closeModal() {isModalOpen.value false}return {isModalOpen,openModal,closeModal}} } /scriptSuspense用于处理异步依赖等待所有异步操作完成后再渲染组件。templateSuspensetemplate #defaultAsyncComponent //templatetemplate #fallbackdivLoading…/div/template/Suspense /templatescript import { defineAsyncComponent } from vueconst AsyncComponent defineAsyncComponent(() import(./components/MyComponent.vue))export default {components: {AsyncComponent} } /script全局API重构 Vue3对全局API进行了重构将许多全局方法和属性移动到了app.config.globalProperties中减少了全局污染提高了模块化的程度。 import { createApp } from vue import App from ./App.vueconst app createApp(App)// 添加全局属性 app.config.globalProperties.$myGlobalMethod () {console.log(This is a global method) }// 添加全局指令 app.directive(focus, {mounted(el) {el.focus()} })app.mount(#app)更好的测试支持 Vue3提供了一系列工具和库使得单元测试和端到端测试更加便捷。 单元测试使用Vue Test Utils进行单元测试。npm install vue/test-utils vue/vue3-jest jestimport { mount } from vue/test-utils import MyComponent from /components/MyComponent.vuedescribe(MyComponent.vue, () {it(renders correctly, () {const wrapper mount(MyComponent, {props: {message: Hello, Vue3!}})expect(wrapper.text()).toContain(Hello, Vue3!)}) })端到端测试使用Cypress进行端到端测试。npm install cypressdescribe(My App, () {it(displays the correct title, () {cy.visit(/)cy.get(h1).should(contain, Welcome to Vue3)}) })五、实战案例 示例项目Todo List 我们将通过一个简单的Todo List应用来展示Vue3的一些核心特性和新特性。 项目结构 my-todo-app/ ├── public/ │ └── index.html ├── src/ │ ├── assets/ │ ├── components/ │ │ └── TodoList.vue │ ├── App.vue │ └── main.js ├── package.json └── vite.config.js安装依赖 npm install vue创建主应用文件 src/main.js import { createApp } from vue import App from ./App.vuecreateApp(App).mount(#app)创建App组件 src/App.vue templatediv idapph1Todo List/h1TodoList //div /templatescript import TodoList from ./components/TodoList.vueexport default {components: {TodoList} } /script创建TodoList组件 src/components/TodoList.vue templatedivinput v-modelnewTodo keyup.enteraddTodo placeholderAdd a new todo /ulli v-for(todo, index) in todos :keyindex{{ todo }}button clickremoveTodo(index)Remove/button/li/ul/div /templatescript import { ref } from vueexport default {setup() {let newTodo ref()let todos ref([])function addTodo() {if (newTodo.value.trim()) {todos.value.push(newTodo.value)newTodo.value }}function removeTodo(index) {todos.value.splice(index, 1)}return {newTodo,todos,addTodo,removeTodo}} } /script结语 Vue3不仅继承了Vue2的优点而且通过引入Composition API、优化响应式系统、增强TypeScript支持等一系列创新为开发者提供了更加灵活、高效的开发体验。无论是对于新手还是经验丰富的开发者Vue3都值得尝试和深入学习。希望本文能够帮助你更好地理解和掌握Vue3的核心概念和技术要点开启你的Vue3之旅。