这里是代码

<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是reactive的，noneReactiveVariable不是。
我的问题是：
1.当我点击按钮时，模板中的两个变量都发生了变化。我认为不应该改变noneReactiveVariable，因为它的定义没有ref或reactive关键字。我的猜测是，reactiveVariable的值变化导致模板更新，并导致模板中的noneReactiveVariable也发生了变化。我不确定。
1.如果我像这样修改模板：

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

型
在这种情况下，当我点击按钮时，模板中的noneReactiveVariable并没有改变。现在看起来没有问题。但是我在函数clickBtn中有一个nextTick，当我点击按钮时，我可以在控制台中看到登录，这意味着UI或模板已经更新。我想如果模板更新了，为什么模板中的noneReactiveVariable没有像以前那样改变，reactiveVariable的改变导致了noneReactiveVariable的改变？
更新：我稍微修改了一下代码。现在noneReactiveVariable在另一个函数中被修改了。但是当按钮被点击时，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>

型