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

[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 自动实例化呢？

[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 确实完全能满足需求的，就有点担心性能