在 JavaScript（包括 Vue、Node.js、前端脚本等）中，const 和 let 是用于声明变量的两种方式，它们的主要区别如下：

✅ const vs let 的区别

示例 1：是否能重新赋值

const name = 'Jason';
name = 'Tom';  // ❌ 报错：Assignment to constant variable.

let age = 30;
age = 31;      // ✅ 正常

示例 2：数组、对象是“引用不变”，但内容可以改

const arr = [1, 2, 3];
arr.push(4);        // ✅ 可以修改数组内容
arr = [5, 6];       // ❌ 报错：不能重新赋值为新数组

const obj = { a: 1 };
obj.a = 2;          // ✅ 可以改属性
obj = { b: 3 };     // ❌ 报错

✅ const 限制的是「变量绑定不能变」，不是「内容不能变」。

示例 3：作用域

两者都有「块级作用域」：

{
  let x = 1;
  const y = 2;
}
// console.log(x); // ❌ 报错
// console.log(y); // ❌ 报错

Vue 中的响应式变量

const total = ref(0)

function addToTotal(val) {
  total.value += val
}

看起来 total 的值的确 变了，但实则 const 这里并不是让值不能变，而是变量绑定不变，我们来深入解释一下。

Vue 中 ref 的本质

const total = ref(0)

这句话创建了一个 响应式引用对象，total 是一个对象，结构大致是：

total = {
  value: 0
}

onst 保证的是：
✅ 变量 total 这个指针 不能重新赋值，但
✅ total.value 可以改（由于这是对象的属性）。

类比解释：

想象一下：

const box = { value: 0 }

box.value += 1   // ✅ 可以
box = { value: 100 } // ❌ 报错

✅ 正确理解

const total = ref(0) // total 绑定到这个 ref 对象
total.value += 1     // 改变的是对象内部的 value，不是重新赋值

所以，这里并不违背 const 的规则，你只是在修改对象内部的值，不是在修改 total 本身的引用。