WoJ's questions

我多年来一直使用 Vue 进行前端（业余）开发，并决定尝试一下Nuxt。

在完成教程之后，我想我已经有了一个大致的想法，并创建了一个简单的项目，其中：

• 我会在页面上输入一个数字，然后发送到后端，
• 然后以一个递增的数字作为响应
• 同时显示在主页上。

为此，我创建了一个新项目，并在其中编写了几个文件：

server/api/addOne.ts

export default defineEventHandler((event) => {
    const oldNumber = (getRouterParam(event, 'number') || 0) as number
    return {
        oldNumber: oldNumber,
        newNumber: oldNumber + 1,
    }
})

app.vue

<template>
  <div>
    <AddOne></AddOne>
  </div>
</template>

components/AddOne.vue

<template>
    <div>
        <input v-model="myNumber" />
        <button @click="sendToServer">send</button>
        <div> -{{ numberFromServer }}- </div>
    </div>
</template>

<script lang="ts">
const myNumber = ref(0)
const numberFromServer = ref(0)
const sendToServer = async (number: number) => {
    console.log('clicked')
    const { data, pending, error, refresh } = await useFetch('/api/addOne', {
        method: 'post',
        body: {
            number: myNumber.value
        }
    })
    numberFromServer.value = data.newNumber
    myNumber.value = -1
    console.log(`number from server: ${numberFromServer.value}`)
}
</script>

应用程序构建并显示预期内容：

该应用程序不起作用（输入一个数字并按下send任何按钮）并且我收到以下警告：

 WARN  [Vue warn]: Property "myNumber" was accessed during render but is not defined on instance.
  at <AddOne>
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Property "numberFromServer" was accessed during render but is not defined on instance.
  at <AddOne>
  at <App>
  at <NuxtRoot>

我不明白它们来自哪里 -myNumber以及numberFromServer在组件中定义。当我输入它们时，我已经很惊讶 VSCode 没有建议它们，但我认为这可能是插件的问题。

我认为我做了一些根本性错误的事情，因此我的问题是关于变量应该在 Nuxt 中定义在哪里，以及它们在 Vue 中定义在哪里。

我有一个非常特殊的用例，我需要触发computed()重新评估。据我所知，一旦内部使用的反应变量的状态发生变化，就会自动触发重新计算。

我的问题：这是唯一的情况吗？

考虑以下代码片段，其中返回当前（计算时）日期。该值设置一次后不会更改。我需要定期重新评估价值。

以下示例中循环例程在内部 computed()运行，不会更改计算值：

• 重新评估空函数

<script setup lang="ts">
import { computed } from 'vue'

const counter = computed(() => {
  setInterval(() => {}, 1000)
  return new Date()
})
</script>

<template>
  <h1>{{counter}}</h1>
</template>

• 重新计算标准变量

<script setup lang="ts">
import { computed } from 'vue'

const counter = computed(() => {
  let u = 0
  setInterval(() => {u++; console.log(u)}, 1000)
  return new Date()
})
</script>

<template>
  <h1>{{counter}}</h1>
</template>

• 重新计算反应变量

<script setup lang="ts">
import { computed, ref } from 'vue'

const counter = computed(() => {
  const u = ref(0)
  setInterval(() => {u.value++}, 1000)
  return new Date()
})
</script>

<template>
  <h1>{{counter}}</h1>
</template>

当反应变量在函数外部更改时，会发生重新计算：

<script setup lang="ts">
import { computed, ref } from 'vue'

const u = ref(0)
const counter = computed(() => {
  u.value;
  return new Date()
})
setInterval(() => {u.value++; console.log(u.value)}, 1000)
</script>

<template>
  <h1>{{counter}}</h1>
</template>

我的问题（更准确地说）：有没有办法setInterval()在compute()函数内部运行？或者换句话说：到底是什么触发了重新计算？

setInterval()注意：我知道这是一个奇怪的情况，我可以根据某个函数在 a 内部重新计算一个反应变量。除了这样对我来说更容易做到这一点之外，这对我来说也是一个了解反应周期细节的机会。

我有一个使用 Tailwind CSS 设计的 Vite/Vue 应用程序。我不明白为什么几个自动生成的内容<div>被包装而不是在一行上。

我尝试从头开始重现这一点，但无论我尝试什么，其行为都符合预期。

最后复制生成的HTML，问题重现。代码如下，也可以在Tailwind Play上找到。

<div class="flex flex-row items-start gap-5">
  <!--v-if-->
  <div data-v-c5bff582="" class="">
    <!-- important events within 8 days -->
    <div data-v-c5bff582="" class="flex flex-auto flex-row gap-3">
      <div data-v-c5bff582="" class="w-32 rounded-3xl bg-green-200 px-5 py-1 text-center text-2xl text-gray-400">test later 1</div>
      <div data-v-c5bff582="" class="w-32 rounded-3xl bg-green-200 px-5 py-1 text-center text-2xl text-gray-400">test 2 later</div>
    </div>
  </div>
  <button class="self-end rounded-md bg-slate-500 px-5 py-2 text-4xl text-white">dump store</button>
</div>

我的问题是“稍后测试1”和“稍后测试2”。为什么它们不排在一行而是包裹在 中<div>？

我尝试了各种类的组合（坦率地说，当我阅读 Tailwind CSS 文档时，我尝试了一些我能想到的任何组合）但没有成功（不过我学到了很多 Tailwind CSS）