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

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

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

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

Vue 中 const、var、let 的区别

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

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

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

一、一句话总结

二、核心区别对比表

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

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

2.1 var（废弃，别用）

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

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

2.2 let（声明会变的变量）

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

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

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

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

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

基础类型：值不能改

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

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

这是 Vue 中最常见的用法！

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

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

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

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

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

<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>

六、总结

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

本文完结！

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