// 掛載階段
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
// 更新階段
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
// 銷毀階段
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

<template>
  <div id="app">
    <div id="frame">
      <!-- 7. 將所需子組件展示到頁面 -->
      <Channel />
    </div>
  </div>
</template>
<script>
import Konva from 'konva';
import { computed } from 'vue';
// 5. 引入所需組件用于繪制和頁面展示
import Channel from './components/Channel.vue';
export default {
  // 2. 父組件將 layer 傳遞給子組件，子組件沒有 layer 就無法繪制組件
  provide() {	// 依賴注入，所有子組件可獲取
    return {
      // 3. 傳遞給子組件的 layer應(yīng)當(dāng)是響應(yīng)式的，否則對子組件的修改無法同步到父組件的layer
      layer: computed(() => this.layer),      // 4. 響應(yīng)式的區(qū)別，類比C語言的直接傳參和指針傳參
    }
  },
  components: {
    // 6. 注冊子組件
    Channel,
  },
  mounted() {
    // 0.初始化組件
    this.initializeKonva();
    window.addEventListener("resize", this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handleResize);
  },
  data() {
    return {
      stage: null,
      layer: null,
    };
  },
  methods: {
    initializeKonva() {
      this.stage = new Konva.Stage({
        container: "frame",
        width: window.innerWidth,
        height: window.innerHeight,
      });
      // 1. 這里為了解耦和效率，全局使用一個layer
      this.layer = new Konva.Layer();
      this.stage.add(this.layer);
    },
    handleResize() {
      this.stage.width(window.innerWidth);
      this.stage.height(window.innerHeight);
      this.stage.batchDraw();
    },
  },
};
</script>
<style scoped>
    /* 樣式細(xì)節(jié)不表 */
</style>
 

<template>
    <div>
        <div ref="container"></div>
    </div>
</template>
<script>
import Konva from 'konva';
export default {
    // 1. 接收父組件依賴注入的 layer 
    inject: ['layer'],
    components: {},
    data() {return {};},
    mounted() {
        // 2. 使用 this.$nextTick(() => {})，在DOM更新之后執(zhí)行回調(diào)函數(shù)
        this.$nextTick(() => {
            // 3. 初始化
            this.initializeKonva();
        });
    },
    methods: {
        initializeKonva() {
            this.group = new Konva.Group({
                // ...
            });
            const backgroundRect = new Konva.Rect({
               // ...
            });
            const textTop = new Konva.Text({
                // ...
            });
            this.textLevel = new Konva.Text({
                // ...
            });
            this.textGain = new Konva.Text({
                // ...
            });
            const textBottom = new Konva.Text({
                // ...
            });
            const line1 = new Konva.Line({
                // ...
            });
            const line2 = new Konva.Line({
                // ...
            });
            const line3 = new Konva.Line({
                // ...
            });
            this.group.add(backgroundRect, textTop, this.textLevel, this.textGain, textBottom, line1, line2, line3);
            // 4. layer 是通過依賴注入傳遞，inject接收的，使用 this 訪問
            this.layer.add(this.group);
            // 5. 更新 layer
            this.layer.draw();
        },
    },
};
</script>
<style></style>
  

<template>
    <div>
        <div ref="container"></div>
        <!-- 3. v-if="flag" 控制子組件的初始化時機(jī) -->
        <SwitchButton :btnNameIndex="0" :x="0" :y="group.height() / 17 + group.height() / 17 / 4" :parent="this.group"
            v-if="flag" />
        <SwitchButton :btnNameIndex="1" :x="0" :y="group.height() / 17 * 3 - group.height() / 17 / 3" :parent="this.group"
            v-if="flag" />
        <!-- 4. :parent="this.group" 將this.group傳遞給子組件，命名為parent，這種傳遞方式默認(rèn)為響應(yīng)式，無需其他操作 -->
        <LevelMeter :x="0" :y="group.height() / 17 * 4 + group.height() / 17 / 2" :parent="this.group" v-if="flag"
            @levelChangeEvent="handleLevelChange" />
        <Gain :x="0" :y="group.height() / 17 * 4 + group.height() / 17 / 4" :parent="this.group" v-if="flag"
            @dBChangeEvent="handleDBChange" />
    </div>
</template>
<script>
import Konva from 'konva';
import SwitchButton from './SwitchButton.vue';
import LevelMeter from './LevelMeter.vue';
import Gain from './Gain.vue';
export default {
    inject: ['layer'],
    components: {
        SwitchButton,
        LevelMeter,
        Gain,
    },
    data() {
        return {
            // ...
            // 0. 準(zhǔn)備一個flag用于確認(rèn)初始化時機(jī)
            flag: false,
            group: null,
        };
    },
    mounted() {
        // 1. 存在父親，切需要使用父親中的 layer ，等待父組件初始化完成
        this.$nextTick(() => {
            this.initializeKonva();
            // 2. 使用flag判斷是否已經(jīng)初始化完成
            this.flag = true;
        });
    },
    methods: {
        initializeKonva() {
            // ...
            this.layer.add(this.group);
            this.layer.draw();
        },
        handleDBChange(newDB) {
            // ...
        },
        handleLevelChange(newLevel) {
            // ...
        },
    },
};
</script>
<style></style>