VueJS - DOM 模板解析和自定义元素答案

【问题标题】：VueJS - DOM template parsing and custom elementsVueJS - DOM 模板解析和自定义元素
【发布时间】：2023-04-03 23:31:01
【问题描述】：

基本上我需要 VueJS 在 DOM 模板解析模式下警告我未注册的组件。目前看起来 Vue 在使用 DOM 模板时并不关心自定义 HTML，同时在使用单文件组件、字符串模板和 x-模板时会正确发出错误（根据 the docs）。

重现问题的一种简单方法是注册组件：

Vue.component('existing', {
  template: `
    <div>
      <p>Existing component</p>
    </div>
  `
})

然后挂载一个简单的 Vue 实例

new window.Vue({
  el: '#app',
  data() {
    return {
      text: 'text'
    }
  },
  mounted() {
    console.log('mounted')
  }
})

其中，在#app元素下的DOM中，有一个未注册的元素，如

<div id="app">
  {{text}}
  <existing></existing>

  <!-- Should give an error -->
  <non-existing></non-existing>
</div>

我准备了一个CodePen 来重现这个简单的环境。

【问题讨论】：

标签： javascript templates vue.js dom

【解决方案1】：

在这种情况下，Vue 确实会引发 [Vue warn] 错误。

但是，您在 CodePen 示例 (vue.min.js) 中使用了 Vue 的生产版本，它会抑制这些警告。

这是一个使用 Vue 的非生产版本的示例：

Vue.config.devtools = false;

Vue.component('existing', {
  template: `
    <div>
      <p>Existing component</p>
    </div>
  `
})

new Vue({
  el: '#app',
  data() {
    return {
      text: 'text'
    }
  },
  mounted() {
    console.log('root mounted')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{text}}
  <existing></existing>
  
  <!-- Should give an error -->
  <non-existing></non-existing>
</div>

【讨论】：

实际上就是（微不足道的）它。谢谢！