10. 如何干净利索的 拆出 合适的组件--上

从我的思路来说：首先要思考这几个问题

• 拆的这个结构适合作为组件吗 ？拆开的话要拆到什么程度呢 ？
• 拆组件这一行为能够有效的减少代码、让渲染数据更简便吗 ？
• 拆到一半感觉遇到的问题太多，耽误进度还要不要拆。

首先 我认为合适拆组件的结构

• 思考一下，如果是你的话会如何拆分呢，拆分哪一部分呢？

方案一

• 重复区域全部拎出来，这样数据的渲染比较便捷，代码量也会减少。
  • 优点： 可以实现循环编写内容，节省代码，渲染便捷
  • 缺点：复用性较差，这个组件是包含着 chart 的，代码大概长这样。

<template>
    <div class="box">
        <div class="data">...</div>
        <div class="chart" ref="chart"></div>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
    export default{
        name:'CompositeChart'，
        data(){ 
        // ...,
        option:{
            // 图表的配置项，自己找去  https://echarts.apache.org/zh/index.html
            // 或直接搜索 Echars 官网
        }
        },
        method:{
            // 初始化图表 初始化方法里面写的是获取的真实 DOM
            this.myChart = echarts.init(this.$refs.chart);
            
        }
    }
</script>

• 想到这里时的脑子还是比较乱的，但是绝对是要拆出来，不可能写这么多的重复代码。

方案二

• ！！首先！！ 在工作中，不管使用什么办法，第一条要务就是完成，因此，我先是使用第一方案，把静态搭建出来。

我的最终方案是将以下 结构 拆解出来

• 将它拆出来，首先肯定是相似点比较多，精准一点就是：样式相同，内容性质相同。

• 再者，将它的左侧拆做组件，可以减少很多的代码，虽然对于之后渲染数据不太友好

• 1.拆组件的前提

• 2.拆组件的注意事项

• 3.什么样的组件才适合拆

时间到了，我先发一个，无论如何一天一章