vue.js - 为什么 Vue 有额外的马上？它打破了 this.$root 完全

Question

如果你打开任何 CodeSandbox 默认的 Vue 模板，或者只是像这样的 vue-cli 默认模板

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

它将有一个额外的<Root />元素。

它破坏了所有写的东西this.$root。

为什么会这样？

有没有办法解决这个问题？

标签： vue.jsvuejs2vue-componentvuex

Answer 1

如果您向根 Vue 实例添加一些数据 - 您将在 DevTools 中看到它与您的 App 组件中的数据不同：

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  data:
  {
    someTest: 123,
  },
  render: h => h(App)
}).$mount("#app");

正在发生的事情已经发生了多年。您无法解决它，因为这是设计使然，没有它就无法工作。

如果您想访问 App 而不是根实例 - 那么您将不得不使用this.$root.$children[0]