Vue中const、var、let的核心区别及最佳实践
更新时间：2026年05月19日 09:13:39 作者：No8g攻城狮
文章主要讲述了JavaScript中var、let和const三种声明变量方式的区别与适用场景,强调了在实际开发中应尽量避免使用var,优先使用const声明常量,用let声明需要修改的变量,特别强调了在Vue项目中const是最常用的声明方式,需要的朋友可以参考下
var 基本不用优先用 const需要修改变量用 let
我用最简单、最实用的方式给你讲清楚三者的核心区别：
一、一句话总结
- var：老旧、不推荐，有变量提升、无块级作用域，容易出 bug
- let：声明可修改的变量，有块级作用域，不能重复声明
- const：声明不可修改的常量（引用类型可改内容），最常用
二、核心区别对比表
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数级 / 全局 | 块级 {} | 块级 {} |
| 能否修改值 | 能 | 能 | 基础类型不能改 |
| 能否重复声明 | 能 | 不能 | 不能 |
| 变量提升 | 有（会 undefined） | 有（但不能用） | 有（但不能用） |
| 推荐程度 | 不推荐 | 必要时用 | 优先用 |
块级作用域：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 中最实用的使用规则（直接背）
90% 的情况用 const
- 定义
ref/reactive响应式数据 - 导入组件 / 工具函数
- 定义对象、数组、函数
只有变量需要重新赋值时，用 let
- 计数器
let i = 0 - 循环变量
- 需要多次赋值的普通变量
永远不要用 var
现代 Vue 项目（Vue3/Vue2 + webpack/vite）完全不需要 var。
五、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>
六、总结
- var：老旧、坑多，别用
- let：变量需要重新赋值时用
- const：声明不重新赋值的变量（对象 / 数组内部可改），Vue 首选
到此这篇关于Vue中const、var、let的核心区别及最佳实践的文章就介绍到这了,更多相关Vue const、var、let区别与实践内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了修改Vue打包后的默认文件名操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了Vue3中的Excel数据管理,即下载模板并导入数据功能的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2024-05-05
vuex中this.$store.commit和this.$store.dispatch的基本用法实例
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况,下面这篇文章主要给大家介绍了关于vuex中this.$store.commit和this.$store.dispatch的基本用法的相关资料,需要的朋友可以参考下2023-01-01
使用Vue 框架开发项目中,遇到个问题,就是在用户提交数据时,如果连续多次点击按钮,会触发多次,导致数据异常,这篇文章主要介绍了Vue3防重复点击指令clickOnce使用的相关资料,需要的朋友可以参考下2026-03-03
Vue3的Composition API是一个全新的API，它允许开发人员将Vue组件中的逻辑封装在单独的功能性组合中，而不是依赖于Vue选项对象。这篇文章将深入探讨Vue3的Composition API及其使用方法,需要的朋友可以参考下2023-07-07
页面跳转,我们一般都通过路由跳转实现,通常情况下可直接使用router-link标签实现页面跳转,下面这篇文章主要给大家介绍了关于vue如何通过点击事件实现页面跳转的相关资料,需要的朋友可以参考下2022-07-07
Vue.js与 ASP.NET Core 服务端渲染功能整合
本文通过案例给大家详细分析了ASP.NET Core 与 Vue.js 服务端渲染,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了Vue.js中关于“{{}}”的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Axios提供了简洁一致的API,使得发送HTTP请求变得非常容易,无论是GET、POST、PUT还是DELETE等请求,都可以通过简洁的语法轻松实现,这篇文章主要介绍了Vue3中Axios的使用附完整代码,需要的朋友可以参考下2025-06-06
本篇文章主要介绍了Vue2.0学习之详解Vue 组件及父子组件通信，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论