关于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的关系更严密，也更直观。然而这两种办法都没有按功能模块进行拆分，简直是把所有的办法都堆到一起。最初再抛出一个问题，有些零碎的原型设计就曾经很大水平的既定了代码的设计，话中有话就是代码的耦合度等和零碎的设计有很大关系。在这种耦合度必然存在的状况下要怎么拆分功能模块，让代码更容易治理和保护。或者是否有更好的代码设计的思路或计划啊，搜索枯肠就是想不出啊~