为什么非反应变量在 Vue3 中表现得很奇怪？

问：

代码如下

<template>
  <input type="button" value="click" @click="clickBtn"/>
  <div id="reactiveDiv">{{ reactiveVariable }}</div>
  <div id="noneReactiveDiv">{{ noneReactiveVariable }}</div>
</template>

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

const reactiveVariable = ref('reactive')

let noneReactiveVariable = 'non reactive '

function clickBtn(){
  reactiveVariable.value = (new Date().getTime()).toString()
  noneReactiveVariable = (new Date().getTime()).toString()

  nextTick(()=>{
    console.log('next tick')
  })
}

</script>

我有两个变量：reactiveVariable 是反应式的，noneReactiveVariable 不是。

我的问题是：

1. 当我单击该按钮时，模板中的两个变量都会更改。我认为不应该更改 noneReactiveVariable，因为它是在没有 ref 或反应式关键字的情况下定义的。我的猜测是反应变量 reactiveVariable 的值更改导致模板更新，也导致模板中的 noneReactiveVariable 更改。我不确定。

2. 如果我像这样更改模板：

<template>
  <input type="button" value="click" @click="clickBtn"/>
  <div id="noneReactiveDiv">{{ noneReactiveVariable }}</div>
</template>

在这种情况下，当我单击该按钮时，模板中的 noneReactiveVariable 不会更改。现在看来还不错。但是我在函数clickBtn中有一个nextTick，当我单击按钮时，我可以看到控制台中的登录，这意味着UI或模板已更新。我认为如果模板已经更新，为什么模板中的noneReactiveVariable没有像以前一样改变，reactiveVariable的变化导致了noneReactiveVariable的变化？

更新： 我稍微更改了代码。现在，noneReactiveVariable 在 reactiveVariable 以外的另一个函数中发生了变化。但是 noneReactiveVariable 仍在更改，并在单击按钮时更新为 DOM。

<template>
    <input type="button" value="click" @click="clickBtn"/>
    <div id="reactiveDiv">{{ reactiveVariable }}</div>
    <div id="noneReactiveDiv">{{ noneReactiveVariable }}</div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from "vue"

const reactiveVariable = ref('reactive')

let noneReactiveVariable = 'non reactive '

onMounted(()=>{
    setInterval(()=>{
        noneReactiveVariable = (new Date().getTime()).toString()
    },1000)
})

function clickBtn(){
    reactiveVariable.value = (new Date().getTime()).toString()

    nextTick(()=>{
        console.log('next tick')
    })
}

</script>