《大数据技术及应用》课件 单元7补充部分 vue3简介

Vue3简介CATALOGUE目录Vue3简介Vite构建工具CompositionAPI组件通信全局属性基于Vue3示例项目讲解Vue3简介01Vue3的初期阶段，团队对Vue2存在的问题进行了深入分析和总结，提出了Vue3的设计目标和核心理念。初始构思与设计在Vue3的开发过程中，团队对多种技术方案进行了实验和比较，最终选择了最符合Vue3设计理念的技术栈。技术选型与实验经过长时间的开发和迭代，Vue3逐渐趋于成熟，并引入了众多新特性和改进。开发与迭代Vue3正式发布后，得到了广泛的关注和应用，成为了前端领域的热门框架之一。发布与推广Vue3的发展历程响应式系统升级Vue3采用了全新的响应式系统，相比Vue2更加高效、灵活和可预测。Vue3在性能方面进行了大量优化，包括减少不必要的计算、内存管理和虚拟DOM等方面，使得应用程序运行更加流畅。Vue3对TypeScript的支持更加完善，提供了更好的类型推断和编辑器支持，使得开发更加便捷和安全。Vue3的设计更加模块化，使得开发者可以更加容易地扩展和定制Vue的功能。更好的性能更好的TypeScript支持更好的可扩展性Vue3的特点与优势Vue3的适用场景复杂单页面应用Vue3适合构建复杂的单页面应用，其强大的响应式系统和组件化开发方式可以大大提高开发效率和代码可维护性。移动端开发Vue3的轻量级和高效性使得它非常适合移动端开发，可以快速构建出性能优良、体验流畅的移动端应用。桌面应用开发Vue3也可以用于桌面应用开发，其丰富的UI组件和可扩展性可以满足桌面应用的各种需求。数据可视化与大屏展示Vue3的数据驱动视图和高效渲染机制使得它非常适合数据可视化和大屏展示等场景。Vite构建工具02Vite是尤雨溪(EvanYou)开发的一款构建工具，旨在提供更快的冷启动、即时的热模块更新以及真正的按需编译Vite支持开箱即用的TypeScript，无需额外配置即可享受TypeScript的开发体验Vite简介与优势Vite通过原生ESM提供极速的更新与启动，无需打包即可直接运行代码，实现秒级启动和更新Vite内置了丰富的功能，如模块热更新、CSS预处理器、压缩和优化等，方便开发者快速构建高效的应用安装Vite可以通过npm或yarn进行安装，如`npminstall-gcreate-vite`或`yarncreatevite-appmy-app`运行Vite通过命令行工具进入项目目录，运行`vite`或`vitebuild`即可启动开发服务器或构建生产版本配置ViteVite的配置文件为`vite.config.js`，可以在其中进行自定义配置，如别名、插件、优化等调试ViteVite内置了调试功能，可以通过浏览器控制台或Vite的命令行工具进行调试Vite的安装与配置Vite的使用技巧与注意事项利用Vite的插件机制，可以扩展Vite的功能，如添加全局变量、压缩图片等。02在使用Vite进行构建时，需要注意代码的兼容性和优化问题，避免出现性能瓶颈01Vite目前仅支持现代浏览器，对于老旧浏览器可能存在兼容性问题Vite的使用技巧与注意事项03Vite的配置文件需要遵循一定的规范，否则可能导致配置无效或出错的问题CompositionAPI03setup函数是Vue3中引入的新特性，用于替代Vue2中的选项式API（OptionsAPI）。在setup函数中，可以声明响应式状态、计算属性、函数等，并可以将它们返回给模板使用。setup函数详解setup函数返回的对象会被合并到组件的渲染上下文中，因此可以在模板中直接使用返回的值。setup函数是组件内使用CompositionAPI的入口，它是一个接收props和context两个参数的函数。ref与reactive的使用与区别01ref和reactive都是Vue3中提供的响应式API，用于创建响应式数据。02ref用于处理基本类型数据，返回一个响应式对象，该对象的value属性指向实际的数据。在模板中使用时，需要通过.value来获取实际的值。03reactive用于处理对象类型数据，返回一个响应式代理对象，该对象与原始对象保持双向绑定。在模板中使用时，可以直接访问代理对象的属性。04需要注意的是，当使用ref处理对象类型数据时，Vue3会自动将其转换为reactive处理。010405060302Vue3中对生命周期函数进行了一些调整，将原有的生命周期函数拆分为了onMounted、onUpdated、onUnmounted等函数。这些函数需要在setup函数中使用，并通过import{onMounted}from'vue'的方式引入。onMounted函数在组件挂载后调用，可以用于执行一些初始化操作。onUpdated函数在组件更新后调用，可以用于执行一些更新操作。onUnmounted函数在组件卸载前调用，可以用于执行一些清理操作。需要注意的是，这些生命周期函数需要在组件实例化前声明并使用，否则将无法正确触发。生命周期函数的变化与用法组件通信04用于声明组件的props，可以指定props的类型、默认值、是否必传等，同时支持TypeScript的类型推断。defineProps用于声明组件的事件，可以指定事件名、参数类型等，同样支持TypeScript的类型推断。defineEmits在组件中使用`defineProps`和`defineEmits`来定义props和事件，然后在模板中通过`$props`和`$emit`来访问和使用它们。使用示例defineProps与defineEmits的使用祖先组件通过`provide`选项来提供数据或方法给后代组件。provide后代组件通过`inject`选项来注入祖先组件提供的数据或方法。injectVue3内部通过维护一个从祖先到后代的单向依赖关系链，当祖先组件的数据发生变化时，会通知到所有依赖该数据的后代组件进行更新。实现原理provide与inject的实现原理1.对于跨层级的组件通信，可以考虑使用Vuex或事件总线等解决方案。2.避免在组件之间直接修改props，应该通过事件来通知父组件进行修改。3.在使用`provide`和`inject`时，要注意避免产生循环依赖。4.尽量保持组件的独立性，减少组件之间的直接依赖。5.使用`defineProps`和`defineEmits`来明确组件的接口，提高代码的可维护性。6.在进行跨层级通信时，优先考虑使用Vuex来管理状态，以保持数据的一致性和可预测性。组件通信的注意事项与使用技巧全局属性05123Vue3中引入了`globalProperties`用于添加全局属性，可以在应用的任何组件中访问这些属性。通过`app.config.globalProperties`可以配置全局属性，例如添加自定义方法或数据。在组件内部，可以通过`this.$root`或`getCurrentInstance().appContext.config.globalProperties`访问全局属性。globalProperties的配置与使用Vue3对全局API进行了重构，将许多全局API从Vue对象上移到了应用实例上，例如`Vue.nextTick`变为`app.nextTick`。移除了Vue2中的一些全局API，如`Vue.set`、`Vue.delete`等，建议使用Vue3提供的新的响应式API进行替代。全局API的变更对于插件开发者和使用全局API较多的项目有一定影响，需要进行相应的适配和修改。全局API的变更与影响010201Vue3仍然支