使用嵌套的v-if安装和卸载事件

Question

我正在试图理解为什么我要获得多个/额外的mount和unmount事件在娇小-vue。我见过类似的关于Vue本身(和组件)的问题，我认为它们在同一个领域，但仍然有点困惑。

看起来，当我得到所有多个mount事件时，只有一个事件触发，其中被挂载的元素具有el.isConnected=true，所以我可能会使用它作为触发器，判断是否运行附加的事件处理程序，但我担心在修改模型状态时，事件的数量会产生和构建事件的数量。

我应该用不同的方式来写这些，这样我就不会得到多个事件了吗？

场景:

1. 单击Edit，然后取消:为什么要为v- for =“model.beneficiaries中的项”卸载两个？
2. 单击Edit，然后保存: All OK。点击接受:为什么isConnected = false安装在“编辑屏幕”上？
3. 重复编辑、取消或编辑保存的周期，然后接受并阅读有关acceptClicks的注释。

JSFiddle

<script type="module">
    import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

    const state = reactive({
        setMode: function (benefit) {
            var beneficiaries = benefit == undefined ? [] : [ "Spouse", "Son" ];
            this.model.beneficiaries = beneficiaries;
            this.model.currentBenefit = benefit;
            this.model.showConfirm = false;
        },
        startEdit: function (benefit) {
            console.log("Edit Clicked");
            this.setMode(benefit);
        },
        cancelEdit: function () {
            console.log("Cancel Clicked");
            this.setMode();
        },
        saveBenefit: function () {
            console.log("Save Clicked");
            this.model.showConfirm = true;
        },
        acceptBenefit: function () {
            console.log("Accept Clicked");
            this.model.acceptClicks++;
            this.setMode();
        },
        model: {
            acceptClicks: 0,
            currentBenefit: undefined,
            showConfirm: false,
            beneficiaries: []
        }
    });

    createApp(state).mount('#app')
</script>

<div id="app" v-scope>
    <div>State:</div>
    <div>currentBenefit: {{model.currentBenefit == undefined ? 'undefined' : 'set'}}</div>
    <div>showConfirm: {{model.showConfirm}}</div>
    <div>beneficiaries: {{model.beneficiaries.length}}</div>
    <div>acceptClicks: {{model.acceptClicks}}</div>
    <div v-if="model.acceptClicks > 0">
        <div>After each Accept</div>
        <ul>
            <li>When clicking Edit, {{model.acceptClicks}} isConnected=false mounts for 'Has Beneficiaries', 'Spouse' and 'Son'</li>
            <li>When clicking Edit, then Cancel, {{2 + model.acceptClicks * 2}} unmounts for 'Spouse' and 'Son'; {{1 + model.acceptClicks}} unmounts for 'Has Beneficiaries'</li>
        </ul>
    </div>

    <div v-if="model.currentBenefit != undefined">
        <h3>Editing {{model.currentBenefit?.name}}</h3>
        <div v-if="!model.showConfirm">
            <div @vue:mounted="console.log('Mount: ' + $el.innerHTML + ', isConnected: ' + $el.isConnected)" @vue:unmounted="console.log('Unmount: ' + $el.innerHTML)">Edit Screen</div>
            <div v-if="model.beneficiaries.length > 0">
                <div @vue:mounted="console.log('Mount: ' + $el.innerHTML + ', isConnected: ' + $el.isConnected)" @vue:unmounted="console.log('Unmount: ' + $el.innerHTML)">Has Beneficiaries</div>
                <div v-for="item in model.beneficiaries">
                    <div @vue:mounted="console.log('Mount: ' + $el.innerHTML + ', isConnected: ' + $el.isConnected)" @vue:unmounted="console.log('Unmount: ' + $el.innerHTML)">{{item}}</div>
                </div>
            </div>

            <button type="button" @click.prevent="cancelEdit">Cancel</button>
            <button type="button" @click.prevent="saveBenefit">Save Benefit</button>
        </div>
        <div v-if="model.showConfirm">
            <button type="button" @click.prevent="acceptBenefit">Accept Confirm</button>
        </div>
    </div>
    <div v-if="model.currentBenefit == undefined">
        <h3>No Benefit</h3>
        <button type="button" @click.prevent="startEdit($event, { name: 'Health Benefit' })">Edit Benefit</button>
    </div>
</div>

Answer 1

在这方面花了一段时间之后，我发现条件v-if="model.beneficiaries.length > 0"没有任何意义，因为您已经在顶级div v-if="model.currentBenefit !== undefined"中添加了一个条件。

如果model.currentBenefit值不是未定义的，那么很明显，model.beneficiaries将始终包含一个长度，按照您在setMode函数中所做的赋值。

因此，删除内部v-if将解决您面临的问题。

问题背后的原因/根源

根据documentation，当调用unmounted钩子时，组件实例的所有指令都已解除绑定，所有事件侦听器都已被删除，这将导致再次加载该指令并多次记录控制台。

下面是演示的jsfiddle链接。在这个演示中，您可以看到，我在DOM中添加了两次相同的条件，并且它调用@vue:unmounted两次。