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

比如，

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 发生了变化，导致这行判断失效， 渲染失败。

原文地址：https://www.cnblogs.com/btgyoyo/p/9305148.html