Vue 开发中的各种异常情况

Question

报错： Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

场景： 多个挂载到 body 下的弹窗在进行切换显示时报错

<Modal v-if="visible1">
<Modal1 v-if="visible2">
<Modal2 v-if="visible3">

原因：从报错中可知，Vue 在 DOM 更新时，插入节点 insertBefore 方法报错。通过调试窗口得知 调用时实际传参为

visible1变为 false ,visible2变为 true 时， Modal 组件已经销毁了，可是这里还是执行了插入方法，由于父节点不包含已经销毁的元素，所以会产生插入失败的报错.

解决方法：

<Modal v-if="visible1">
<Modal1 v-else-if="visible2">
<Modal2 v-else-if="visible3">

---

报错 ： < -- function(e,n,r,o){return He(t,e,n,r,o,!0)} -->

原因： 在 index.html 中声明了 组件的模版，然后通过 el 直接实例化应用。而打包后的代码并没有携带 compiler ，所以导致解析错误

修复： 将使用组件 实例化应用，然后挂载到 dom 中

// before
new Vue({
    router,
    store,
    el: '#app'
})

// after
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

---

El-Slider input 触发问题

El-Slider 在第一渲染时会触发 input 事件，业务开发时监听该事件可能会存在问题
处理： 包裹组件，屏蔽第一次 input 事件

<template>
    <el-slider v-bind="$attrs"  @input="inputHandle"></el-slider>
</template>

<script>

export default {
    name: 'FixSlider',
    data() {
        return {
            isFirstInput: true,
        }
    },
    methods: {
        inputHandle(v) {
            if (this.isFirstInput) {
                this.isFirstInput = false
                return
            }
            this.$emit('input', v)
        },
    },
}
</script>

<style lang="less" scoped></style>