【前端】Vue 中 const、var、let 的区别

博主介绍：✌全网粉丝24W+，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌

技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。

感兴趣的可以先关注收藏起来，在工作中、生活上等遇到相关问题都可以给我留言咨询，希望帮助更多的人。

Vue 中 const、var、let 的区别

一、一句话总结
二、核心区别对比表
[三、逐一看用法（Vue 中真实场景）](#三、逐一看用法（Vue 中真实场景）)
- [2.1 var（废弃，别用）](#2.1 var（废弃，别用）)
- [2.2 let（声明会变的变量）](#2.2 let（声明会变的变量）)
- [2.3 const（声明不变的变量，Vue 最常用）](#2.3 const（声明不变的变量，Vue 最常用）)
[四、Vue 中最实用的使用规则（直接背）](#四、Vue 中最实用的使用规则（直接背）)
[五、Vue3 中最标准的写法示例](#五、Vue3 中最标准的写法示例)
六、总结

在 Vue（不管是 Vue2 还是 Vue3）里， var 基本不用 ， 优先用 const ， 需要修改变量用 let ，这是前端通用的最佳实践。

我用最简单、最实用的方式给你讲清楚三者的核心区别：

一、一句话总结

var：老旧、不推荐，有变量提升、无块级作用域，容易出 bug
let ：声明可修改的变量，有块级作用域，不能重复声明
const ：声明不可修改的常量（引用类型可改内容），最常用

二、核心区别对比表

特性	var	let	const
作用域	函数级 / 全局	块级 `{}`	块级 `{}`
能否修改值	能	能	基础类型不能改
能否重复声明	能	不能	不能
变量提升	有（会 undefined）	有（但不能用）	有（但不能用）
推荐程度	不推荐	必要时用	优先用

块级作用域：if/for/while 里的 {} 包裹的区域，let/const 在外面访问不到。

三、逐一看用法（Vue 中真实场景）

2.1 var（废弃，别用）

js 复制代码

// Vue 中千万别这么写
function test() {
  var a = 10
  if (true) {
    var a = 20 // 会覆盖外面的 a！
  }
  console.log(a) // 20（污染变量，危险）
}

缺点：没有块级作用域、变量提升、可重复声明，极易造成 bug。

2.2 let（声明会变的变量）

适用场景：计数器、循环变量、需要重新赋值的变量

js 复制代码

// Vue 中常用
let count = 0
count = 1 // 可以修改

for (let i = 0; i < 5; i++) {
  // i 只在循环里有效
}
// console.log(i) // 报错，外部访问不到

2.3 const（声明不变的变量，Vue 最常用）

适用场景：定义常量、导入模块、对象 / 数组、函数、ref/reactive 等

基础类型：值不能改

js 复制代码

const PI = 3.14
PI = 3.1415 // 报错，不能重新赋值

引用类型（对象 / 数组）：可以改内容

这是 Vue 中最常见的用法！

js 复制代码

// Vue3 中定义响应式数据（最标准写法）
const user = { name: '小明' }
const list = [1, 2, 3]

user.name = '小红' // 可以改内部属性
list.push(4) // 可以改数组内容

user = {} // 报错，不能重新赋值整个对象

四、Vue 中最实用的使用规则（直接背）

90% 的情况用 const
- 定义 ref/reactive 响应式数据
- 导入组件 / 工具函数
- 定义对象、数组、函数
只有变量需要重新赋值时，用 let
- 计数器 let i = 0
- 循环变量
- 需要多次赋值的普通变量
永远不要用 var

现代 Vue 项目（Vue3/Vue2 + webpack/vite）完全不需要 var。

五、Vue3 中最标准的写法示例

vue 复制代码

<script setup>
// 1. 导入：用 const
import { ref, reactive } from 'vue'

// 2. 响应式数据：用 const（内部可改，整体不能改）
const count = ref(0)
const user = reactive({ name: '张三' })

// 3. 函数：用 const
const add = () => {
  count.value++
}

// 4. 需要重新赋值的变量：用 let
let timer = null
timer = setTimeout(() => {})
</script>

六、总结

var ：老旧、坑多，别用
let ：变量需要重新赋值时用
const ：声明不重新赋值 的变量（对象 / 数组内部可改），Vue 首选

好了，今天分享到这里。希望你喜欢这次的探索之旅！不要忘记 "点赞" 和 "关注" 哦，我们下次见！🎈

本文完结！

祝各位大佬和小伙伴身体健康，万事如意，发财暴富，扫下方二维码与我一起交流！！！