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

posted @ 2018-07-13 15:19  btg.yoyo  阅读(9526)  评论(1编辑  收藏  举报