首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue const、var、let区别与实践

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区别与实践内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！