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 dataA14 }，15 computedB {16 return dataB17 },18 computedC {19 return dataC20 }21 },22 mounted {23 this.methodA24 this.methodB25 this.methodC26 },27 methods: {28 async methodA {29 console.log30 },31 async methodB {32 console.log33 },34 async methodC {35 console.log36 }37 }38}3940// vue34142export default {43 setup {44 // A45 const dataA = ref46 const computedA = computed => {47 return dataA.value48 })49 const methodA = => {50 console.log51 }52 onMounted => {53 methodA54 })5556 // B57 const dataB = ref58 const computedB = computed => {59 return dataB.value60 })61 const methodB = => {62 console.log63 }64 onMounted => {65 methodB66 })676869 // C70 const dataC = ref71 const computedC = computed => {72 return dataC.value73 })74 const methodC = => {75 console.log76 }77 onMounted => {78 methodC79 })8081 return {82 dataA: dataA,83 computedA,84 methodA,85 dataB: dataB,86 computedB,87 methodB,88 dataC: dataC89 computedC,90 methodC,91 }92 }93}

可以看到原来只能在vue2中配置一次的属性，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 9 }10 onMounted => {11 methodC12 })1314 return {15 dataC: dataC16 computedC,17 methodC18 }19}2021// 调用22import C from 'c.js'2324const c = C

2. 代码编写优化

如上，我们已经不需要上下滚动编辑器以调试代码了，但是有两个问题希望可以解决。一个是写法上更加灵活了也会导致混乱的问题，如果没有遵循一定的规范，则代码会变成面向过程似的结构，一篇到底；第二个是每个需要在模板中使用的变量与方法都需要收到return，相对麻烦

借助reactive和toRefs，重新规整代码

1export default { 2 setup { 3 // A 4 const A = reactive => { 7 return dataA.value 8 }), 9 methodA {10 console.log11 }12 })13 onMounted => {14 A.methodA15 })1617 // B18 const B = reactive => {21 return dataB.value22 }),23 methodB {24 console.log25 }26 })27 onMounted => {28 B.methodB29 })3031 return {32 ...toRefs,33 ...toRefs34 }35 }36}

这样写的好处在于，同一块的功能被包裹在一个reactive中相对独立，代码结构更加的清晰，而且只需return整个模块，模块中新增的变量会自动导出在模板中可用

3. setup语法糖的发展

1. css变量

vue提出在单文件中使用当前实例的变量

11314

在此语法糖之前，想通过变量修改样式都需要通过在模板中直接绑定样式对象或者以修改类名的方式来实现，现在可以直接使用css样式变量了，不得不说是个很奈斯的语法糖

2.

此语法糖虽然遵守了js的语法，但是还是只能在setup语法糖中才能使用，而且不支持在单文件组件外使用，没有让这种语法生效在Vue的特定环境之外，所有编者还是有些失落

让vue成为开发者编写js的中间平台，对开发者来说始终会产生一些心理负担，【改变js的编写方式】与【改变编写的内容】之间的区别，还是让开发者小心翼翼的考虑，争取不会有一天被vue‘套住’。

只是可怜那波使用了第一波语法糖的开发人员，所幸团队内还没有在情况明朗之前贸然使用

4. ref语法糖改进文档

新的ref语法糖过多久就又被改进了，改进版主要是把全局变量改为只有和$这俩变量了

117

晕，目前为止，所有ref语法糖都只能看看，不敢在项目里用

来源：file/tupian/20220803/16485129.html