将Vue.js混合到现有的SSR网站中？

Question

有没有可能使用Vue创建组件，然后实例化到由PHP应用程序渲染的自定义标签上？类似于“自定义元素轻量级”？

如果我将Vue实例挂载到页面根元素上，它可以“工作”，但是据我所知，在这种情况下，Vue会将整个页面作为模板。我想这可能会导致性能问题，并在其他JavaScript代码干扰DOM时引起麻烦。

目标是逐步替换传统的jQuery代码。对于这个问题，是否有常见的解决方法？

编辑：嵌套这些组件也是一个要求。一个简单的例子是嵌套折叠面板。

编辑2：一些演示问题的fiddle链接。

基于riot.js的工作解决方案： https://jsfiddle.net/36xju9sh/

<div id="page">
  <!-- This is supposed to show "This is a test." twice. -->
  <test>
    <test></test>
  </test>
</div>
<script type="riot/tag">
  <test>
    <p>This is a test.</p>
    <yield/>
  </test>
</script>
<script>riot.mount('*')</script>

使用Vue.js的两种方法： https://jsfiddle.net/89ejjjsy/1/

HTML:

<div id="page">
  <!-- This is supposed to show "This is a test." twice. -->
  <test>
    <test></test>
  </test>
</div>
<script type="text/x-template" id="test-template">
  <p>This is a test.</p>
  <slot></slot>
</script>

JavaScript：

Vue.config.ignoreCustomElements = ['test'];

// This won't hit the nested <test> element.
new Vue({
    el:'test',
    template: '#test-template',
});

// This does, but takes over the whole page.
Vue.component('test', {
    template: '#test-template',
});

new Vue({
  el: '#page',
});

- Philipp Melab

---

Vue 实例是独立的，除非它们是组件，因此可以从具有本地化功能的独立 Vue 实例开始，然后在完成后将其转换为组件并使用单个 Vue 应用程序。 - Mat J

我忘了提到嵌套也是一个要求。已经相应地编辑了问题。 - Philipp Melab

没问题，你可以在每个Vue实例中使用组件。只是不要在这些独立的项目之间共享实例。始终创建它们自己的实例。类似于这样的东西就可以工作了，对吧？ - Mat J

Answer 1

您不必使用整个页面作为Vue实例作用域。例如，可以将#comments-container用作注释组件的作用域，该组件将嵌套在页面的某个地方。

您可以在一个页面上拥有多个VueJS实例。

- Marek Urbanowicz

---

我的意思是嵌套在彼此之内，而不是在页面上嵌套。我创建了一个演示问题的fiddle：https://jsfiddle.net/89ejjjsy/ - Philipp Melab