vue3代码编写
vue3代码编写
团队内的vue3已经升级一年,在这一年中vue也在不停的更新,为了最大化组合式api带来的优势,便需要合理规范代码的编写方式…
1.从vue2到vue3
vue2组件采用配置式API,导致同样的功能块分散,并和其他的功能块混合。我们希望统一功能块的代码可以放在(封装)一起,在空间上增加可读性:
总的来说,就是将一个大型的vue2代码块变成许多小型的vue2块:
假设一个页面中有三个功能模块,分别是A,B,C,那么一下就是写法上的不同
1// vue2
2
3export default {
4 data() {
5 return {
6 dataA: dataA,
7 dataB: dataB,
8 dataC: dataC
9 }
10 },
11 computed: {
12 computedA() {
13 return dataA
14 },
15 computedB() {
16 return dataB
17 },
18 computedC() {
19 return dataC
20 }
21 },
22 mounted() {
23 this.methodA()
24 this.methodB()
25 this.methodC()
26 },
27 methods: {
28 async methodA() {
29 console.log(computedA)
30 },
31 async methodB() {
32 console.log(computedB)
33 },
34 async methodC() {
35 console.log(computedC)
36 }
37 }
38}
39
40// vue3
41
42export default {
43 setup() {
44 // A
45 const dataA = ref()
46 const computedA = computed(() => {
47 return dataA.value
48 })
49 const methodA = () => {
50 console.log(computedA.value)
51 }
52 onMounted(() => {
53 methodA()
54 })
55
56 // B
57 const dataB = ref()
58 const computedB = computed(() => {
59 return dataB.value
60 })
61 const methodB = () => {
62 console.log(computedB.value)
63 }
64 onMounted(() => {
65 methodB()
66 })
67
68
69 // C
70 const dataC = ref()
71 const computedC = computed(() => {
72 return dataC.value
73 })
74 const methodC = () => {
75 console.log(computedC.value)
76 }
77 onMounted(() => {
78 methodC()
79 })
80
81 return {
82 dataA: dataA,
83 computedA,
84 methodA,
85 dataB: dataB,
86 computedB,
87 methodB,
88 dataC: dataC
89 computedC,
90 methodC,
91 }
92 }
93}
可以看到原来只能在vue2中配置一次的属性(computed等),setup中可以多次调用,从而实现了同一功能代码的整合,并且你还可以将某些可复用的携带vueApi的代码封装:
1// C.js
2export default () => {
3 const dataC = ref()
4 const computedC = computed(() => {
5 return dataC.value
6 })
7 const methodC = () => {
8 console.log(computedC.value)
9 }
10 onMounted(() => {
11 methodC()
12 })
13
14 return {
15 dataC: dataC
16 computedC,
17 methodC
18 }
19}
20
21// 调用
22import C from 'c.js'
23
24const c = C()
2. 代码编写优化
如上,我们已经不需要上下滚动编辑器以调试代码了,但是有两个问题希望可以解决。一个是写法上更加灵活了也会导致混乱的问题,如果没有遵循一定的规范,则代码会变成面向过程似的结构,一篇到底;第二个是每个需要在模板中使用的变量与方法都需要收到return,相对麻烦
- 借助reactive和toRefs,重新规整代码
1export default {
2 setup() {
3 // A
4 const A = reactive({
5 dataA: dataA,
6 computedA: computed(() => {
7 return dataA.value
8 }),
9 methodA() {
10 console.log(computedA.value)
11 }
12 })
13 onMounted(() => {
14 A.methodA()
15 })
16
17 // B
18 const B = reactive({
19 dataB: dataB,
20 computedB: computed(() => {
21 return dataB.value
22 }),
23 methodB() {
24 console.log(computedB.value)
25 }
26 })
27 onMounted(() => {
28 B.methodB()
29 })
30
31 return {
32 ...toRefs(A),
33 ...toRefs(B)
34 }
35 }
36}
这样写的好处在于,同一块的功能被包裹在一个reactive中相对独立(当然不同模块之间可以相互调用),代码结构更加的清晰,而且只需return整个模块,模块中新增的变量会自动导出在模板中可用
3. setup语法糖的发展
1. css变量
vue提出在单文件中使用当前实例的变量
1<script>
2export default {
3 setup () {
4 return {
5 opacity: 0,
6 font: {
7 weight: 100
8 }
9 }
10 }
11}
12</script>
13
14<style>
15div {
16 opacity: v-bind(opacity);
17 font-weight: v-bind('font.weight');
18}
19</style>
在此语法糖之前,想通过变量修改样式都需要通过在模板中直接绑定样式对象或者以修改类名的方式来实现,现在可以直接使用css样式变量了,不得不说是个很奈斯的语法糖
2. <script setup>和ref文档
vue提出在单文件组件中引入<script setup>的类型,可以自动将所有顶级变量声明暴露给模板使用,同时可以消除ref.value的写法
1<script setup>
2// 引入的 Foo 组件可以直接在 template 里使用了!
3import Foo from './Foo.vue'
4// 就像在普通的 setup() 中一样编写代码,无须return变量
5ref: a = 1
6// 该变量可以像普通变量那样使用
7console.log(a++)
8// 想要获取到原本的变量的话需要在变量前面加一个符号
9console.log($count.value)
10const fn = () => {}
11<script>
至此许多具有争议的论点被广大开发者提出:
从写法上,确实实使得代码更加的简洁,减少了组件声明以及手动暴露变量的代码,这也是编者比较认可的,但是确实带来不少的问题
根据文档中提出,部分情况还是只能使用普通的<script>标签,如:
- 部分选项(inheritAttrs)无法声明
- 声明只需要执行一次的代码
- 不支持使用render函数
无法像普通的<script>标签那样只暴露部分变量,暴露所有变量必将导致生成的代码变大,而暴露变量的问题,上面我们已经用toRefs解决大部分问题,相比之下,反而会产生下面的问题:
1<script setup>
2const data = reactive({
3 a: 1,
4 b: 2
5})
6// 因为语法糖自动暴露data,而模板中使用a变量的时候需要写data.a,多了一层
7
8// 如果想在模板中直接使用a变量,则需要解构:
9const { a, b } = ...toRefs(data)
10// 这样又变成,每新增一个变量都要手动解构,与最开始的return无异,而且还要写a.value
11
12// 如果想规避这个问题就不能使用reactive,则每个基础数据都必须使用ref
13const a = ref(1)
14ref: b = 2
15// 这样一来,又分散了代码,产生了ref.value的问题
16<script>
针对ref的语法糖,已经不在是javascript了,原来的vue正因为是逐渐式的框架带来的便利,甚至于所写的代码可以直接在浏览器中运行(只要引入vue.js),而这样的创新语法(至少对于vue来说),则只能存在于编译之前,一时难以接受,并且遭到大家的反对。
有一就有二,如果维持这样的创新,那么将来大家写的就不再是js,而是被vue‘挟持’的js了。况且这些语法糖只能在setup语法糖中使用,不利于封装
总之大家的看法各异,在代码编写上必将产生不同的选择,编者也担心vue生态或许会分散,从而解决问题的效率变低
3. 新的ref文档
因为以上提出的各种原因,以及社区开发者的反对意见,旧的ref语法糖最终还是被废弃,而新的ref语法糖重新进入实验
1<script setup>
2// 在setup语法糖中引入了全局变量$ref,直接使用可以不写.value
3let a = $ref(1)
4// a可以直接使用不加.value
5a++
6</script>
此语法糖虽然遵守了js的语法,但是还是只能在setup语法糖中才能使用,而且不支持在单文件组件外使用,没有让这种语法生效在Vue的特定环境之外,所有编者还是有些失落
让vue成为开发者编写js的中间平台,对开发者来说始终会产生一些心理负担,【改变js的编写方式】与【改变编写的内容】之间的区别,还是让开发者小心翼翼的考虑,争取不会有一天被vue‘套住’。
只是可怜那波使用了第一波语法糖的开发人员,所幸团队内还没有在情况明朗之前贸然使用
4. ref语法糖改进文档
新的ref语法糖过多久就又被改进了,改进版主要是把全局变量改为只有和$这俩变量了
1<script setup>
2import { ref } from 'vue'
3
4const a = $(ref(1))
5// a可以直接使用不加.value
6a++
7// $$可以得到a的ref变量
8console.log($$(a))
9
10// 也就是说
11const aRef = ref(1)
12const a = $(aRef)
13// a可以直接使用不加.value
14a++
15console.log(aRef === $$(a))
16</script>
17
晕,目前为止,所有ref语法糖都只能看看,不敢在项目里用
vue3代码编写的更多相关文章
- 使用Spring注解来简化ssh框架的代码编写
目的:主要是通过使用Spring注解的方式来简化ssh框架的代码编写. 首先:我们浏览一下原始的applicationContext.xml文件中的部分配置. <bean id="m ...
- VS开发中的代码编写小技巧——避免重复代码编写的几种方法
上一篇文章中程序员的幸福生活--有你的日子,每天都是情人节,收到了大家的很多好评.鼓励和祝福,非常感动,真诚的谢谢大家.也希望每个朋友都能保持一个积极向上的心态,去迎接丰富多彩的人生. 在开发过程中, ...
- IOS 推送-配置与代码编写
IOS 推送配置与代码编写 这里介绍IOS的推送,本文章已经在IOS6/7/8上都能运行OK,按照道理IOS9应该没问题. 大纲: 1.文章前提 2.推送介绍 3.推送文件账号设置 4.推送证书介绍 ...
- .NET代码编写规范 整理
.NET代码编写规范 整理 .NET代码编写规范 - [ASP.NET] 2009-02-26 | Tag: 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://lensp ...
- 纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
- 如何优雅的代码编写 AutoLayout
概述 使用 Objective-C 纯代码编写 AutoLayout,看 AutoLayout 的字面理解就是自动布局,听起来好像蛮屌的样子.说白了就是适配:适应.兼容各种不同的情况,包括不同版本的操 ...
- 小代码编写神器:LINQPad 使用入门
原文:小代码编写神器:LINQPad 使用入门 一:概述 1:想查看程序运行结果,又不想启动 VS 怎么办? 2:想测试下自己的 C# 能力,不使用 VS 的智能感知,怎么办? 那么,我们有一个选择, ...
- 使用python制作ArcGIS插件(2)代码编写
使用python制作ArcGIS插件(2)代码编写 by 李远祥 上一章节已经介绍了如何去搭建AddIn的界面,接下来要实现具体的功能,则到了具体的编程环节.由于使用的是python语言进行编程,则开 ...
- 代码编写规范说明书(c#.net与asp.net)
代码编写规范说明书(c#.net与asp.net) 目 录1 目的2 范围3 注释规范3.1 概述3.2 自建代码文件注释3.3 模块(类)注释3.4 类属性注释3.5 方法注释3.6 代码间注释4 ...
随机推荐
- 用ffmpeg对视频进行处理
下载安装配置教程:传送门 关键步骤Windows: 官网 合并音频和视频 with open('video/x111.mp4','wb') as f: f.write(data_30080) with ...
- 四月总结&五月计划
四月总结 1. 主要任务 <Effective C++>书 ① 进展: 看完了30讲(共55讲),从4月20号开始居家办公,书落在公司了,一直到昨天29号才去园区上班,耽搁了.30讲之前的 ...
- 卧槽!华为《Linux中文手册》火了,完整版 PDF 开放下载!
这是华为工程师基于最新的Linux编写,循序渐进地对Linux进行讲解.对于零基础可以作为Linux的快速入门教材.我希望能为大家提供切实的帮助. 资料介绍 涵盖基础.系统管理.应用.开发.服务器配置 ...
- ceph日常运维管理
点击关注上方"开源Linux", 后台回复"读书",有我为您特别筛选书籍资料~ 相关阅读: ceph分布式存储简介 常见问题 nearfull osd(s) o ...
- C# 给Word中的字符添加强调符号(着重号)
在Word中添加着重号,即强调符号,可以在选中字符后,鼠标右键点击,选择"字体",在窗口中可直接选择"着重号"添加到文字,用以对重要文字内容起加强提醒的目的,如 ...
- 697. Degree of an Array - LeetCode
697. Degree of an Array - LeetCode Question 697. Degree of an Array - LeetCode Solution 理解两个概念: 数组的度 ...
- boost::bind 不能处理函数重载 (error: no matching function for call to 'bind')
前言 最近任务多.工期紧,没有时间更新博客,就水一期吧.虽然是水,也不能太失水准,刚好最近工作中遇到一个 boost::bind 的问题,花费了半天时间来定位解决,就说说它吧. 问题背景 项目中使用了 ...
- 基于Web的CAD一张图协同在线制图更新轻量级解决方案[示例已开源]
背景 之前相关的博文中介绍了如果在Web网页端展示CAD图形(唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud),有不少朋友问,能不能实现一个协同的功能,实现不同部门不 ...
- Dubbo3 源码系列 -- 环境准备
Dubbo3 源码系列 -- 环境准备 前言 工作中一直使用Dubbo项目,借着这次机会通过源码的方式来学习下Dubbo的源码内容.目前市面上很多都是的Dubbo2系列的教程:就连目前的Dubbo的官 ...
- GO GMP协程调度实现原理 5w字长文史上最全
1 Runtime简介 Go语言是互联网时代的C,因为其语法简洁易学,对高并发拥有语言级别的亲和性.而且不同于虚拟机的方案.Go通过在编译时嵌入平台相关的系统指令可直接编译为对应平台的机器码,同时嵌入 ...