Vue 组件中 移动 this.$el 的注意事项

Posted 2020-12-04 btgyoyo

比如，

mounted () {
    document.body.appendChild(this.$el);
    // insertAdjacentElement
 // insertBefore
},

这几行代码会导致 dom 元素位置  与 VNode 期望的位置不一致

比如：

---------------------------------------

父组件： 

div(id=‘p‘)
 h1 第1个
 button(@click="add")  新增
 p(v-for="(item,index) in list", :key="index")
         | 第 {{item}} 个元素
 ccc

---js部分

methods: {
    add () {
        this.list.push(1);
    }

}

---------------------------------------

子组件 ccc:

div
 | 我是document.body.append的元素

---js部分

mounted () {
    document.body.appendChild(this.$el);
    // insertAdjacentElement
 // insertBefore
}

---------------------------------------

本来 ccc 在VNode 中的位置其父 parent 是  id 为 p 的div 元素， 然后由于在 mounted 中，$el的位置发生了移动，导致其实际的位置发生了改变，父节点变为 body 元素。

这将导致  父组件中的 v-for  p 元素，渲染失败

 

原因：

在点击 父组件 按钮是，会触发 组件的update， 这将会导致新的元素会  insert 到dom树中，这段代码在 vue 源码，patch.js 中

function insert (parent, elm, ref$$1) {
  if (isDef(parent)) {
    if (isDef(ref$$1)) {
      if (ref$$1.parentNode === parent) {
        nodeOps.insertBefore(parent, elm, ref$$1);
      }
    } else {
      nodeOps.appendChild(parent, elm);
    }
  }
}

在插入新的 p 元素时， 会执行这段代码， 三个参数 分别为： div(id=‘p‘),  p 元素自身， ref$$1 为 ccc 的$el

ref$$1.parentNode === parent

由于 ccc 的$el 的parent 发生了变化，导致这行判断失效， 渲染失败。