一个关于Vue3响应式数据的问题

问题描述

但是在下列程序中，当我点击按钮1的时候，非响应式的数据发生了改变。而当我点击按钮2的时候非响应式的数据没有发生改变。这到底是什么原因引起的呢？

问题代码展示

<template>
  <div>
 <h3>k:{{k}}-------------b:{{b}}</h3>
 <button @click="event1">按钮1</button>
 <button @click="event2">按钮2</button>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";

// 非响应式的数据
let k = 1
// 响应式的数据
let b =ref(1)

function event1() {
  k+=1
  b.value+=1
  console.info(k, b)
}

function event2() {
  k+=1
  console.info(k)
}
</script>