createApp().mount('#app') 清除vue3中#app的子元素

Posted

技术标签:

【中文标题】createApp().mount(\'#app\') 清除vue3中#app的子元素【英文标题】:createApp().mount('#app') clears #app's child elements in vue3createApp().mount('#app') 清除vue3中#app的子元素 【发布时间】:2021-01-14 10:02:33 【问题描述】:

所以我正在尝试将 Vue3 添加到现有的 asp.net 核心项目中。我希望我的 razor 应用程序正常渲染,然后使用自定义 vue 组件给我的前端一种更具反应性的感觉。但是,当我将一个空的 vue 应用程序安装到我的包装 div(所有其他正文内容的父级)时,它似乎正在删除该包装 div 的所有 innerhtml,完全删除所有服务器呈现的正文内容。

在我的 _Layout.cshtml 文件中,我将所有内容包装在 id 为“app”的 div 中。

<body>
  <div id='app'>
    @RenderBody()
  </div>

  <script src="~/js/vue-app/dist/js/chunk-vendors.76316534.js"></script>
  <script src="~/js/vue-app/dist/js/app.bf4c5ba9.js"></script>
</body>

在 main.js 中

import  createApp  from 'vue'

const vueApp = createApp().mount('#app');

// component definitions below

使用这样设置的应用程序,当我运行我的 .net 项目时,我看到一个空白的白色浏览器窗口,而不是我期望的剃刀编译的 html。在 Vue2 中,可以这样做:

const vueApp = new Vue(
  el: '#app',
  data: 
    ....
  ,
  methods: 
   ....
  //, etc
);

这会导致应用正常渲染,绑定到#app 的 vue 应用,使 vue 可用于子内容(模型绑定、vue 点击处理等)。

我尝试在mount() 上使用isHydrate 可选参数,但它不会导致结果发生变化。

我在这里遗漏了什么吗?如果不清除内容无法挂载应用,如何慢慢迁移现有项目以使用 vue3?非常感谢任何指导。

谢谢

注意事项:

vue-next runtime-dom source 如果这个方法是被调用的 mount 方法,我不确定为什么 container.innerHTML 不会在组件中设置。 不是函数,也没有为它定义渲染/模板。 vue-next runtime-core apiCreateApp source 如果这是被调用的方法....我不知道。

【问题讨论】:

【参考方案1】:

更新

没有模板渲染器的 Vue 3 在编译后将无法处理模板。要解决此问题,您可以导入 vue/dist/vue.esm-browser(以及用于产品的 vue.runtime.esm-browser.prod),而不是默认的 vue。这将允许运行时组件渲染。

【讨论】:

我认为这会起作用(将其更改为 template: document.getElementById('app').innerHTML),但它似乎对最终呈现的页面没有影响。查看网络选项卡,已编译的 html 正在正确返回到浏览器。只是没有被渲染到安装 vue 应用程序的位置。 这提醒了我...我知道是什么问题,我会更新答案 需要使用合适的 bundle,而不是默认的 'vue',为了让 bundle 更小,不会包含模板渲染器 啊,这有点道理。感谢您的帮助!

以上是关于createApp().mount('#app') 清除vue3中#app的子元素的主要内容,如果未能解决你的问题,请参考以下文章

vue3.0的入门使用

vue3在install中mount得不到实例

极品vue3,你必须学会的东西

极品vue3,你必须学会的东西

vite + vuejs 3 在 mount() 处获取 vue 实例

6 mvvm设计模式