关于vue3:VUE3初体验-关于代码管理的我的思考

简图：

解释：

1.VUE 文件只定义组件，以及模板中所须要的回调办法（例如 @click 等）。
2.useInit.js，只定义监听器、计算属性、生命周期等，相当于 VUE2 的 watch、compute、mounted(等等) 等，但用到的办法和依赖的均来源于 useTools.js。
3.useTools.js，只定义依赖和办法，相当于 VUE2 的 data、props、methods。
4.VUE 文件从 useInit.js 中获取模板中用到的依赖。
5.useInit.js 从 useTools.js 文件中获取初始化用到的办法和依赖，以及须要传递到 VUE 文件中的依赖。
6. 返回办法和依赖。
7. 返回依赖。

举例：

App.vue

<template>
  <div
    class="test"
    :style="{
      width: state.fatherWidth + 'vw',
      background: state.fatherBgc,
    }"
  >
    <button @click="changeBgc"> 变色 </button>
    <child></child>
  </div>
</template>

<script setup>
import Child from "./components/child.vue";
import {defineComponent} from "vue";
import useInit from "./utils/App/useInit";

defineComponent({Child,});

let {state} = useInit();

function changeBgc() {state.fatherBgc = "lightblue";}
</script>

<style scoped>
.test {
  height: 100vh;
  overflow: hidden;
}
</style>

child.vue

<template>
  <div class="test">
    <button @click="updateWidth"> 变窄 </button>
  </div>
</template>

<script setup>
import PubSub from "pubsub-js";
function updateWidth() {PubSub.publish("updateWidth")
}
</script>

<style scoped>

</style>

useInit.js

import PubSub from "pubsub-js";
import useTools from "./useTools";
import {onMounted, onUnmounted, watch} from "vue";

export default function useInit() {
    const {
        init,
        pubsubOptions,
        state,
    } = useTools();

    watch(() => state.fatherWidth,
        val => {if (val % 2 === 1) {state.fatherBgc = "pink"}
        }
    )

    onMounted(() => {init();
    });

    onUnmounted(() => {for (let psevt in pubsubOptions) {PubSub.unsubscribe(psevt);
        }
    });

    return {state}
}

useTools.js

import PubSub from "pubsub-js"
import {reactive} from "vue";

export default function useTools() {
    const pubsubOptions = {updateWidth: null,}
    const state = reactive({
        fatherWidth: 100,
        fatherBgc: 'yellowgreen'
    })

    function updateWidth() {
        state.fatherWidth --
        state.fatherBgc = 'lightblue';
        if (state.fatherWidth <= 80) {
            state.fatherWidth = 100
            state.fatherBgc = 'yellowgreen'
        }
    }

    return {init: function() {pubsubOptions.updateWidth = PubSub.subscribe("updateWidth", () => {updateWidth()
            })
        },
        pubsubOptions: pubsubOptions,
        state: state,
    };
}

总结：

最后我的想法是延长 optionAPI 的写法，将 data、props、components、watch、生命周期钩子等都写到 vue 组件中，而后将这些依赖以传递的形式传递到 useInit 等，然而一顿打磨之后发现传递其实能够有起点。比方 useTools，把所有的 data、methods、都定义到 useTools 中，而后再返回到内部。其实思路上就是一个正反的区别，然而向外传递的形式能让 data 和 methods 的关系更严密，也更直观。然而这两种办法都没有按功能模块进行拆分，简直是把所有的办法都堆到一起。最初再抛出一个问题，有些零碎的原型设计就曾经很大水平的既定了代码的设计，话中有话就是代码的耦合度等和零碎的设计有很大关系。在这种耦合度必然存在的状况下要怎么拆分功能模块，让代码更容易治理和保护。或者是否有更好的代码设计的思路或计划啊，搜索枯肠就是想不出啊~