2022-6-26 vue2.0 项目demo 和师傅会议复盘总结

学习机器 | 苏菲

已于 2022-12-29 17:22:34 修改

阅读量405

点赞数

文章标签： javascript 前端 vue.js

于 2022-06-26 18:05:36 首次发布

本文链接：https://blog.csdn.net/cainiaoysa/article/details/125471672

版权

2022-6-26 vue2.0 项目demo 和师傅会议复盘总结

今天的项目需求如下
Home.vue 父组件

<template>
  <div>
    <el-button @click="add">新增预警邮件</el-button>
    <el-button @click="edit">编辑预警邮件</el-button>
    <ModalWarn
    :modalVisible="modalVisible"
    @closeModal="closeModal"
    ref="modal"
    >
    </ModalWarn>
  </div>
</template>
<script>
import ModalWarn from "./components/ModalWarn/index.vue";
export default {
  name: "Home",
  components: {
    ModalWarn,
  },

ModalWarn.vue 子组件

<template>
  <el-dialog
    :title="title"
    :visible.sync="modalVisible"
    width="1400px"
    top="6vh"
    v-if="modalVisible"
    :before-close="handleModalClose"
    :close-on-click-modal="false"
    class="warnDialog"
  >
    <div class="main">
      <EmailUser 
      type="1"
      :dynamicTags='dynamicTagsOne'
      ></EmailUser>
      <EmailUser 
      type="2"
      :dynamicTags='dynamicTagsTwo'
      ></EmailUser>
    </div>
  </el-dialog>
</template>
<script>
import EmailUser from "../EmailUser/index.vue";
export default {
  name: "ModalWarn",
  components: {
    EmailUser,
  },

效果

1、关于组件销毁的问题

一开始我把 v-if=“modalVisible” 写在子组件里面，当我点击了新增按钮关闭弹框后，在打开修改按钮，弹框的数据还是新增的内容，也就是数据还是上一次的。组件没有因为vi-if就销毁。没一直都没有原因，因为公司的项目一直都是这么写的。。。。。。

师傅给我解决方案：

1、查看该组件是否真的被销毁了，用destroyed()方法。

 destroyed() {
  console.log('2222222222222222333333');
  },

如果组件被销毁就会触发这个方法，我发现，如果按照一开始在子组件里面加v-if，没有触发这个方法，所以我的数据显示的是上一次的，而且，关闭弹框之后，computed()方法,就没有再执行。

修改后的代码

<template>
  <div>
    <el-button @click="add">新增预警邮件</el-button>
    <el-button @click="edit">编辑预警邮件</el-button>
    <ModalWarn
    :modalVisible="modalVisible"
    @closeModal="closeModal"
    ref="modal"
    v-if="modalVisible"
    >
    </ModalWarn>
  </div>
</template>

在父组件的引用子组件的地方增加了v-if ，就发现destoryed()方法触发了。但是这个时候，computed（）方法还是没有触发。

2、组件销毁后，子组件的DOM也就无法渲染，父组件没法获取到子组件的方法，所以就报错了。

// 增删改查的公共方法
    commonHandleFn(data,type) {
      this.modalType = type;
      this.modalVisible = true;
      this.$refs.modal.initData(data,type);

    },

这里没有找到initData的方法

// 增删改查的公共方法
    commonHandleFn(data,type) {
      this.modalType = type;
      this.modalVisible = true;
      console.log('this.$refs.modal',this.$refs.modal);
      this.$refs.modal.initData(data,type);

    },

在这里插入图片描述

原因就是ModalWarn.vue 已经被销毁了，DOM也就不存在了。

师傅说，当组件销毁后，你想让他重新渲染应该怎么办呢，我没想到，他说你用$nexkTick()试下

this.$nextTick()的使用场景
什么时候需要用Vue.nextTick():

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。
在数据变化后要执行的某个操作，当你设置 vm.someData = ‘new value’，DOM并不会马上更新，而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

修改代码如下

// 增删改查的公共方法
    commonHandleFn(data,type) {
      this.modalType = type;
      this.modalVisible = true;
      this.$nextTick(() => {
        console.log('this.$refs.modal',this.$refs.modal);
        this.$refs.modal.initData(data,type);
      })
    },