个人中心
gpt4 book ai didi

Vue先初始化父组件再初始化子组件的方法（自定义父子组件mounted执行顺序）

转载 作者：我是一只小鸟 更新时间：2023-07-06 22:32:02 25 4
gpt4 key购买 nike

写在前面:

  • 本篇内容内容主要讲述了，在使用 Konva 进行开发过程中遇到的一些问题。（既然是组件加载顺序，主要牵扯到的就是，父子组件的关系，父子组件的生命周期） 。

  • 众所周知， Vue 中父子组件生命周期的执行顺序为:

                                  
                                // 挂载阶段
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

// 更新阶段
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

// 销毁阶段
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

  • 然而，在某些情况下我们有其他需求，例如我们不得不 让子组件的初始化在父组件初始化完成之后再进行 （一般是针对 mounted ），下面将进行详细说明 。

1、引用关系说明

  • 最终目的：使用 Konva 库绘制组件，该组件由两个按钮、一个电平表、一个增益控制推杆，这些子组件组合起来构成所需组件，并将其绘制到 Stage 中的 Layer 上
    • Stage 和 Layer 只有一个，所以应当写在App.vue中，使用时将 Layer 传递给子组件 （且这个Layer应当是响应式的） ；且由于要绘制所需组件，因此自然是要引用所需组件，即所需组件是App.vue的子组件
    • 所需组件应当引用各个子组件，它是各个子组件的父亲
  • 综上，是一个三层的继承关系，此外，由于有了 Stage 和 Layer 才能绘制所需组件，有了所需组件才能绘制各个子组件，此时， 各个控件的初始化顺序与生命周期刚好相反 。

2、两层继承关系示例

假如说目前我只有两层继承关系， App.vue 和所需组件 Channel.vue 。

代码在下方展示，详细的内容我将在代码中使用注释详细说明， 请按照注释编号顺序进行阅读和理解 。

  • App.vue 。

    要点:

    • layer 依赖注入， 使所有的子组件可以获取
    • 父组件的 layer 进行依赖注入时需要使用响应式 ，以便于父组件知道 layer 的改变（类比C语言的直接传参和指针传参）
    • 需要将所需组件引用、注册并展示到页面上 
                                
                              <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应当是响应式的，否则对子组件的修改无法同步到父组件的layer
      layer: computed(() => this.layer),      // 4. 响应式的区别，类比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>
    /* 样式细节不表 */
</style>

  • Channel.vue 。

    要点:

    • 接收 layer 。

    • 使用 this.$nextTick(() => { 初始化代码 }) ，会使得初始化代码在父组件的初始化完成后再执行 。

      • this.$nextTick() 是 Vue.js 提供的一个方法，用于在DOM更新之后执行回调函数。它的作用是确保在下次 DOM 更新循环结束之后执行回调函数，以确保操作的准确性和可靠性.

      • 在 Vue.js 中，当数据发生改变时， Vue 会异步地更新 DOM 。这意味着在修改数据后立即访问更新后的 DOM 可能无法得到正确的结果，因为此时 DOM 可能尚未完成更新.

        通过使用 this.$nextTick() 方法，我们可以将回调函数延迟到下一次 DOM 更新循环之后执行。在这个时候， Vue 已经完成了所有的异步 DOM 更新，我们可以放心地操作更新后的 DOM 元素，确保获取到准确的结果.

    • 绘制完成后更新 layer 。

                                
                              <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更新之后执行回调函数
        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>

3、三层及以上继承关系示例

  • 在上面的内容中，使用 this.$nextTick(() => { 回调 }) 解决了两层继承关系中的反向初始化顺序的问题。
  • 但是这本质上更像是一种小聪明，当到了三层以上继承关系的时候这种方法不能有任何效果，因为子组件和孙子组件如果不同时使用 this.$nextTick(() => { 回调 }) 总会有人在父组件之前初始化，而如果都用了 this.$nextTick(() => { 回调 }) 那么它们两个本身的初始化顺序仍然是先子后父，一定会出问题。所以要使用其他的方式来解决这个问题

代码在下方展示，详细的内容我将在代码中使用注释详细说明， 请按照注释编号顺序进行阅读和理解 。

  • Channel.vue 。

    要点:

    • 接收 layer 等不再赘述
    • 使用 this.$nextTick(() => { 初始化代码 }) ，会使得初始化代码在父组件的初始化完成后再执行
    • 设置 flag 用于判断当前组件初始化是否完成， 使用 v-if="flag" 控制子组件初始化时机 
                                
                              <template>
    <div>
        <div ref="container"></div>
        
        <!-- 3. v-if="flag" 控制子组件的初始化时机 -->
        
        <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，这种传递方式默认为响应式，无需其他操作 -->
        
        <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. 准备一个flag用于确认初始化时机
            flag: false,
            group: null,
        };
    },

    mounted() {
        // 1. 存在父亲，切需要使用父亲中的 layer ，等待父组件初始化完成
        this.$nextTick(() => {
            this.initializeKonva();
            // 2. 使用flag判断是否已经初始化完成
            this.flag = true;
        });
    },
    methods: {
        initializeKonva() {
            // ...
            this.layer.add(this.group);
            this.layer.draw();
        },
        handleDBChange(newDB) {
            // ...
        },
        handleLevelChange(newLevel) {
            // ...
        },
    },
};
</script>
  
<style></style>

最后此篇关于Vue先初始化父组件再初始化子组件的方法（自定义父子组件mounted执行顺序）的文章就讲到这里了,如果你想了解更多关于Vue先初始化父组件再初始化子组件的方法（自定义父子组件mounted执行顺序）的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 使用StableDiffusion生成艺术二维码
文章推荐： GGTalk开源即时通讯系统源码剖析之：服务端全局缓存
文章推荐： 如何在Windows10Professional服务器上搭建自己的Git服务器。
文章推荐： Linux中常用数据库管理系统之MariaDB
我是一只小鸟
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com