Vue3代码如何改写为长尾词？

本文共计1486个文字，预计阅读时间需要6分钟。

Vue3代码编写+团队内的Vue3已升级一年，在这一年中Vue也在不断更新。为了最大化API组合的优势，需要合理规划代码编写方式。1. 从Vue2到Vue3：Vue2组件采用配置式API，Vue3组件使用组合式API，导致相同的功能实现方式有所不同。

vue3代码编写

团队内的vue3已经升级一年，在这一年中vue也在不停的更新，为了最大化组合式api带来的优势，便需要合理规范代码的编写方式…

1.从vue2到vue3

• vue2组件采用配置式API，导致同样的功能块分散，并和其他的功能块混合。我们希望统一功能块的代码可以放在（封装）一起，在空间上增加可读性：

• 总的来说，就是将一个大型的vue2代码块变成许多小型的vue2块：

假设一个页面中有三个功能模块，分别是A，B，C，那么一下就是写法上的不同

1//vue2
2
3exportdefault{
4data(){
5return{
6dataA:dataA,
7dataB:dataB,
8dataC:dataC
9}
10},
11computed:{
12computedA(){
13returndataA
14}，
15computedB(){
16returndataB
17},
18computedC(){
19returndataC
20}
21},
22mounted(){
23this.methodA()
24this.methodB()
25this.methodC()
26},
27methods:{
28asyncmethodA(){
29console.log(computedA)
30},
31asyncmethodB(){
32console.log(computedB)
33},
34asyncmethodC(){
35console.log(computedC)
36}
37}
38}
39
40//vue3
41
42exportdefault{
43setup(){
44//A
45constdataA=ref()
46constcomputedA=computed(()=>{
47returndataA.value
48})
49constmethodA=()=>{
50console.log(computedA.value)
51}
52onMounted(()=>{
53methodA()
54})
55
56//B
57constdataB=ref()
58constcomputedB=computed(()=>{
59returndataB.value
60})
61constmethodB=()=>{
62console.log(computedB.value)
63}
64onMounted(()=>{
65methodB()
66})
67
68
69//C
70constdataC=ref()
71constcomputedC=computed(()=>{
72returndataC.value
73})
74constmethodC=()=>{
75console.log(computedC.value)
76}
77onMounted(()=>{
78methodC()
79})
80
81return{
82dataA:dataA,
83computedA,
84methodA,
85dataB:dataB,
86computedB,
87methodB,
88dataC:dataC
89computedC,
90methodC,
91}
92}
93}

可以看到原来只能在vue2中配置一次的属性（computed等），setup中可以多次调用，从而实现了同一功能代码的整合，并且你还可以将某些可复用的携带vueApi的代码封装：

1//C.js
2exportdefault()=>{
3constdataC=ref()
4constcomputedC=computed(()=>{
5returndataC.value
6})
7constmethodC=()=>{
8console.log(computedC.value)
9}
10onMounted(()=>{
11methodC()
12})
13
14return{
15dataC:dataC
16computedC,
17methodC
18}
19}
20
21//调用
22importCfrom'c.js'
23
24constc=C()
2. 代码编写优化

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

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

1exportdefault{
2setup(){
3//A
4constA=reactive({
5dataA:dataA,
6computedA:computed(()=>{
7returndataA.value
8}),
9methodA(){
10console.log(computedA.value)
11}
12})
13onMounted(()=>{
14A.methodA()
15})
16
17//B
18constB=reactive({
19dataB:dataB,
20computedB:computed(()=>{
21returndataB.value
22}),
23methodB(){
24console.log(computedB.value)
25}
26})
27onMounted(()=>{
28B.methodB()
29})
30
31return{
32...toRefs(A),
33...toRefs(B)
34}
35}
36}

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

3. setup语法糖的发展 1. css变量

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

1<script>
2exportdefault{
3setup(){
4return{
5opacity:0,
6font:{
7weight:100
8}
9}
10}
11}
12</script>
13
14<style>
15div{
16opacity:v-bind(opacity);
17font-weight:v-bind('font.weight');
18}
19</style>

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

2. <script setup>和ref文档

vue提出在单文件组件中引入<script setup>的类型，可以自动将所有顶级变量声明暴露给模板使用，同时可以消除ref.value的写法

1<scriptsetup>
2//引入的Foo组件可以直接在template里使用了！
3importFoofrom'./Foo.vue'
4//就像在普通的setup()中一样编写代码，无须return变量
5ref:a=1
6//该变量可以像普通变量那样使用
7console.log(a++)
8//想要获取到原本的变量的话需要在变量前面加一个