关于#vue.js#的问题：通过一个函数改变这两个变量的值，没有用ref包裹起来的变量在视图上也跟着响应式改变(语言-javascript)

Question

vue3中的响应式问题
有两个变量，一个a,一个b；其中一个变量用ref包裹起来，另一个直接定义。通过一个函数改变这两个变量的值，没有用ref包裹起来的变量在视图上也跟着响应式改变；若只单独改变b的变量则b在视图上并不会变化，请问这是什么原因，那这是不是代表以后定义变量只要让其中一个包裹ref就好了？
代码如下：

<template>
  <div>
    {{a }}--{{ b}}
  </div>
  <button @click="change()">修改</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const a = ref(1);
let b = 2;

function change() {
  a.value = 10;
  b = 20;
  console.log(a.value,b)
}
</script>

<template>
  <div>
    {{a }}--{{ b}}
  </div>
  <button @click="change()">修改</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const a = ref(1);
let b = 2;

function change() {
  b = 20;
  console.log(a.value,b)
}
</script>

Answer 1

因为a 和b 在同一个视图上 因为a 是双向绑定 改变触发视图的更新 b 不是 但是 a和b 在同一视图理 所以也会跟着变，只改变b 是不会触发视图更新的