NativeScript-Vue - 组件不刷新，但 app.js 会

Posted 2023-04-14

【中文标题】NativeScript-Vue - 组件不刷新，但 app.js 会

【英文标题】：NativeScript-Vue - Components not refreshing but app.js does

【发布时间】：2020-09-03 10:43:54

【问题描述】：

有一个非常奇怪的问题，即导入 app.js 的组件在对其进行更改时不会刷新/重新加载，但对 app.js 所做的更改会反映在模拟器和我的手机中。

因此，如果我更改导航组件中的某些内容，则不会发生任何事情。如果我更改 ActionBar 标题，更改会反映，但导航中的第一个更改仍然没有。

只有在我重新加载整个项目时才会生效。

<template>
    <Page>
        <ActionBar title="Welcome to the Shop"/>
        <GridLayout columns="*" rows="*">
            <Label class="message" :text="msg" col="0" row="0"/>
            <navigation></navigation>
        </GridLayout>
    </Page>
</template>

<script>
import navigation from '@/components/navigation/Master.vue';

  export default 
    components: 
        'navigation': navigation
    ,
    data() 
      return 
        msg: 'Hello World! This is Big D.'
      
    
  
</script>

【问题讨论】：

你能解释一下你试图在导航组件中做出哪些改变吗？如果可能的话，也发布导航组件代码！

嗨@KarthikArwin，更改非常简单。我有一个带有 3 个表格的底部导航 - 商店、收藏夹、设置。如果我将标签名称从 Shop 更改为 Shops，则更改不会反映/热重新加载。我还是 NativeScript 的新手，所以我没有做任何高级或复杂的事情。只是想感受一下这个平台。

哦，知道了！实际上，Webpack 曾经关注 Nativescript 中的这些变化，并且在重新渲染原生元素方面还没有成熟。我也经常遇到这个问题！我观察到这曾经发生在我曾经观看过教程的人身上。如果您在应用程序中添加或删除任何文件，您需要删除平台文件夹并运行tns run 命令。但我建议你使用 Sidekick，因为它使用了 HMR，它比普通的 tns cli 效果更好。使用起来舒服多了。这是链接nativescript.org/nativescript-sidekick

嗨@KarthikArwin，非常感谢队友，Sidekick 运行良好，现在我的组件正在渲染更改。从终端命令运行项目时，这很奇怪。我还在犹豫是用 NativeScript 还是 Flutter 来做我的下一个项目，实际上我只是转而学习 Flutter，因为这个问题 - 我认为“次要”让我将 NativeScript 视为一个不稳定的平台。我想使用 NativeScript 的原因是我在 Vue 方面的丰富经验。

@KarthikArwin 如果您将最后一条消息作为答案发布，我会将其标记为正确，因为它解决了我的问题。

【参考方案1】：

实际上，Webpack 曾经在 Nativescript 中观察这些变化，并且在重新渲染原生元素方面还没有成熟。我也经常遇到这个问题！我观察到这曾经发生在我曾经观看过教程的人身上。

如果您在应用程序中添加或删除任何文件，您需要删除平台文件夹并运行tns run 命令。

但我建议你使用 Sidekick，因为它使用 HMR，它比普通的 tns cli 效果更好。使用起来舒服多了。这是链接SideKick