在 Ajax 请求之后以动态附加的 HTML 呈现组件答案

【问题标题】：Render component in dynamically appended HTML after Ajax Request在 Ajax 请求之后以动态附加的 HTML 呈现组件
【发布时间】：2016-11-14 00:37:25
【问题描述】：

用例：

我有一个 JQuery 库的依赖项，它在一些 Ajax 请求之后动态地附加 HTML。我想在附加的 HTML 中显示 Vue 组件。我可以提供 HTML 的内容，但我无法更改它使用 JQuery 附加到 DOM 的方式。

我别无选择，只能在 Ajax 请求完成并将 HTML 附加到 DOM 时呈现组件。

最好的方法是什么？

【问题讨论】：

【解决方案1】：

“最佳”方法是高度主观的。

但是，如果您知道元素 id，您当然可以将组件附加到元素：

import component from 'Component.vue'
new Vue({
    el: '#targetId',
    render: h => h(component)
})

这假设您使用的是单个文件组件。您也可以随时根据documentation 动态创建组件：

new Vue({
  el: '#targetId',
  // options
})

【讨论】：

你知道是否有任何“性能倒退”。我使用了一个外部网格组件，它可以让我在行之间添加表格详细信息。如果用户点击，比如 100 行，这种方法会不会有问题？
这很难说，但它可能不是最优的。如果我理解正确，您实际上是在创建 100 个 Vue 组件？肯定会有开销，但您必须对其进行测试并对其进行分析以查看是否有性能影响。