childrenChangedCallback

默认分类 2019/01/07 10:16

https://github.com/skatejs/skatejs/pull/1228/commits/d3c0405474f18e3f2a26b75438c42aaee79914f8

https://github.com/skatejs/skatejs/pull/1228

if (this.childrenChangedCallback) {
  const mo = new MutationObserver(() => this.childrenChangedCallback());
  mo.observe(this, { childList: true });
  this.childrenChangedCallback();
}

1. 子元素变动时
2. 子元素初始化完成时
3. 当前元素渲染完成

参考slot机制.

/* // 相当于v0中的attachedCallback */
connectedCallback() {
  /* // 当整个DOM都被移除时，停止执行 childrenChangedCallback (setTimeout)，childrenChangedTimer 很重要！！ */
  this.childrenChangedTimer = window.requestAnimationFrame(function() {
    let main = this
    let ctrid = xTag.parseCtrId(main)
    if (!ctrid) {
      ctrid = xTag.makeGUID('')
      main.className = (main.className + ' x-ctrid' + ctrid).replace(/(^\s+|\s+$)/g, '')
    }

    if (main.childrenChangedCallback) {
      main.childrenChangedCallback()
    }
    if (main.childrenRenderFinish) {
      main.childrenRenderFinish()
    }
  }.bind(this))
}

一直认为DOM中应该增加一个childrenChangedCallback的事件以冒泡的方式通知父元素子元素已经渲染完毕， 看了下比较早以前好像有人提案过，期待能早日实现

>> 留言评论