vue3.0实战从0到1实战电商管理系统(第三天)
2020/5/6 11:26:41
本文主要是介绍vue3.0实战从0到1实战电商管理系统(第三天),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
章节文章课程简介:
任何事情都需要时间的沉淀,技术也不例外,今天编写Vue3.0系列的章节文章,只是希望能够比别人更早的去尝鲜一些新的技术,毕竟Vue3.0已经Beta版本了,所以里正式版本也不远了,提前去学习和了解,我们就会比别人有更多的时间去充分理解Vue3.0的特性,只有当你真正理解一门技术的时候,才能够正确的判定它是否合适、是否应该运用到你当前的实际项目当中去。
- 第一天:浅谈vue3.0、初始化项目之:Hello World Vue3.0
- 第二天:Api实战之:vue-composition 我是api调用工程师
- 第三天:vue3如何实现逻辑复用
- 第四天:实战之:高解耦式mock api的设计与订单列表查询
- 第五天:如何实现代码优化
今天是第三天:vue3如何实现逻辑复用
vue3之前的版本,如果要实现无非是以下两种
1:mixin 把公共的逻辑抽取到一个独立的文件中,但是这种方式存在的问题也很明显,如果项目过于复杂的时候,mixin中的代码和外部组件的代码存在命名冲突的时候会被覆盖,而且如果有相同的生命周期函数也会被覆盖,所以会导致代码难以维护,容易出现bug
2:抽取为公共的工具函数,这种方式虽然能够解决部分场景下的代码复用,但是公共函数内没有各自的生命周期,存在一定的局限性
vue3.0中是如何解决这些问题的,请看下面的代码
假如我要实现一个表格分页的公共代码的复用
useUilts/useResizeMin.js
import { ref, onMounted, onUnmounted } from "vue"; export default () => { const width = ref(window.innerWidth); //默认值 const height = ref(window.innerHeight); //默认值 const onUpdate = () => { width.value =window.innerWidth; height.value = window.innerHeight; }; onMounted(() => { window.addEventListener("resize", onUpdate); }); onUnmounted(() => { window.removeEventListener("resize", onUpdate); }); return {width,height} }; 复制代码
App.vue
<template> <section> 屏幕width:{{width}} 屏幕height:{{height}} </section> </template> import useResizeMin from "./useUilts/useResizeMin"; export default { setup() { //这样就很清晰width这些数据是从哪里维护的,且不会冲突其变量 const {width,height}=useResizeMin(); return { width, height } } } 复制代码
第一天:浅谈vue3.0、初始化项目之:Hello World Vue3.0
第二天:Api实战之:vue-composition 我是api调用工程师
下一篇:第四天:实战之:高解耦式mock api的设计与订单列表查询
🎨 原创不易,支持请点赞、转发
这篇关于vue3.0实战从0到1实战电商管理系统(第三天)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南