返回列表

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的事件以冒泡的方式通知父元素子元素已经渲染完毕, 看了下比较早以前好像有人提案过,期待能早日实现