Vue.js中const与let使用困惑：需修改变量却被建议用const

情况1：修改基本类型变量（数字、字符串、布尔） #

如果要修改的是基本类型值，直接用const声明的变量确实无法更改，但可以通过两种方式解决：

• 包装为引用类型：用const声明一个对象，修改对象的属性而非重新赋值整个变量：

  // 导出包装后的对象
  export const appState = {
    count: 0,
    username: 'guest'
  };
  
  // 函数中修改属性
  function updateCount() {
    appState.count++; // 合法，仅修改对象内部属性
  }
  
  function setUsername(name) {
    appState.username = name; // 同样合法
  }
  

• 使用Vue响应式API：如果是Vue组件或组合式API场景，更推荐用ref或reactive创建响应式变量，既符合Vue规范，又能轻松修改：

  import { ref } from 'vue';
  
  // 导出响应式变量
  export const count = ref(0);
  
  // 函数中修改（ref变量需通过.value访问）
  function increment() {
    count.value++;
  }
  

情况2：修改引用类型变量（对象、数组） #

const限制的是变量的引用地址，而非引用类型的内部内容。只要不重新赋值整个对象/数组，修改其内部属性或元素完全合法：

// 导出对象
export const userInfo = {
  age: 25,
  hobbies: ['reading']
};

// 修改对象属性
function updateAge(newAge) {
  userInfo.age = newAge; // 合法
}

// 修改数组
function addHobby(hobby) {
  userInfo.hobbies.push(hobby); // 合法
}

为什么Vue建议用const？ #

Vue推荐const是为了避免意外的变量重新赋值，让代码逻辑更稳定。开发者应尽量通过修改引用类型内部状态或使用响应式API来管理变化，而非随意重新赋值变量。

内容的提问来源于stack exchange，提问作者learner