组件如何实现追加元素的自动实例化

[Marstin]

比如定义组件 <component-a> 使用方法为以下两种：

    <component-a name="test1"></component-a>  
    
    <div name="test2"></div>
    $("[name=test2]").componentA({params:params});

如果是追加元素$(body).append('<component-a name="test3"></component-a>')，这个 test3 在 dom 中存在还是以原始文本存在，而非替换成 <component-a> 组件。
那么怎么在 component-a 内部实现才能让 test3 自动实例化呢？

组件实现代码大概是这样

const ComponentA = function(ele){
  let componentA = {
    init:function(){
      this.createElement(ele,this._getData(ele));
    },
    createElement:function(ele,data){
      this.getTargetElement([...this.ele.attributes],data)
      this._replaceElement(ele,targetEle);
    },
    getTargetElement(attributes,data){
      ……
    },
    getData(ele){
      ……
    },
    _replaceElement(ele){
      ……
    }
  }
  componentA.init();
  return componentA;
}

$("component-a").each(function(){
  new ComponentA(this);
})

[Marstin]

难顶

[temporary]

vue?

[TomatoYuyuko]

你这个问题给我整蒙了，你这用了 mvvm 的框架是吗，那还用 jq 做 dom 操作？

[Marstin]

@TomatoYuyuko @temporary 就是没用 mvvm 框架才有这问题啊，现在很烦

[TomatoYuyuko]

@Marstin 你这是什么框架或者插件写的组件

[rioshikelong121]

看看你的框架有没有提供什么主动渲染 Component 的方法。

[Marstin]

@TomatoYuyuko jq，组件自己手写的
@rioshikelong121 没有

[temporary]

document.body.append(document.createElement('component-a'))

[TomatoYuyuko]

你这么写好绕啊，非得用 JQ 的话，干脆给$挂个新方法，把 append 封装一下不就好了？
$(body)._append('<component-a name="test3"></component-a>')

[twelvechen]

使用 MutationObserver 监听 DOM 变动，然后在回调里实例化试试？

[Marstin]

@twelvechen MutationObserver 确实完全能满足需求的，就有点担心性能