关于元素销毁的 Vue 事件答案

【问题标题】：Vue event on element destruction关于元素销毁的 Vue 事件
【发布时间】：2020-06-25 08:18:20
【问题描述】：

当v-if 条件不再为真时是否存在 vue 事件？
例如，如果我想在 div id foo 出于某种原因被删除时设置 y。
应该用什么代替@whenDivGoes？

<div v-if="z">
   <div id="foo"
     v-if="x"
     @whenDivGoes="y = true"
   >
      Hello
   </div>
<div>
<div v-if="!x">Not X</div>
<div v-if="y">Bye</div>

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

如果我理解正确，当 foo div 不再存在时，您希望将 'y' 的值设置为 true。您的 foo div 在您的“x”为真时显示，在 x 为假时隐藏，因此您可以将“y”声明为依赖于 x 的计算属性。

computed:{
    y(){
        return !x;
    }
}

然后

<div v-if="z">
   <div id="foo"
     v-if="x">
      Hello
   </div>
<div>
<div v-if="!x">Not X</div>
<div v-if="y">Bye</div>

注意：将 'y' 声明为计算属性会阻止您直接对其进行修改/分配值。如果您想在“y”值更改时“做某事”，您可以在“y”上使用watch。

【讨论】：

谢谢，但在您的示例中，y 将始终与 !x 相同。我正在寻找当 div foo 被“销毁”时y 将获得其值的情况，这也可能是由!z 引起的
我意识到在这个例子中，我们可以将 y 计算为 !x && !y，但有些可能要复杂得多。

【解决方案2】：

使用 v-if，节点是否直接取自虚拟 DOM，您需要观察并创建自己的回调。

如果您正在寻找与您的示例类似的快速解决方案，我已经为您编写了一个快速指令，直接放入您想要回调的元素中，但它需要您使用 v-show 与 v-if 相对（因为它只更改 css 显示类）

只需更改您希望在其不再显示时回调的 div，然后添加 v-show-event：

<div id="foo"
 v-show="x"
 v-show-event="() => y = true"
>

所以基本上发生了什么，指令检查元素是否将 style.display 设置为 none

Vue.directive('show-event', {
        update: function(el, binding, vnode) {
         if(el.style.display === "none") {
            if(typeof binding.value==='function') {
              binding.value.bind(vnode.context)(event)
            }
          }
        }
    });

new Vue({
  el: "#app",
  data: {
        done: false,
    newEv: "this is some text"
  },
  methods: {
    toggle: function(){
        this.done = !this.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2 
  v-show="!done" 
  v-show-event="() => newEv = 'show event was hidden'">
    v-show-event directive
  </h2>
  <button @click="toggle()">
   Toggle
  </button>
  <div v-text="newEv"></div>
 </div>

【讨论】：

我认为这比@mursalin 的答案更接近，但我正在寻找适用于v-if 而不仅仅是v-show 的东西我认为这不会。
实际上使用watch 遍历@mursalin 可能是关键。