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