脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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

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

一、一句话总结

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

二、核心区别对比表

特性varletconst
作用域函数级 / 全局块级 {}块级 {}
能否修改值能能基础类型不能改
能否重复声明能不能不能
变量提升有（会 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>

六、总结

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

到此这篇关于Vue中const、var、let的核心区别及最佳实践的文章就介绍到这了,更多相关Vue const、var、let区别与实践内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vite项目vite.config.js详细配置

    vite项目vite.config.js详细配置

    vite.config.js是Vite框架中的配置文件,用于配置项目的构建和运行时的行为,下面这篇文章主要给大家介绍了关于vite项目vite.config.js详细配置的相关资料,需要的朋友可以参考下
    2023-05-05
  • 关于vue的列表图片选中打钩操作

    关于vue的列表图片选中打钩操作

    这篇文章主要介绍了关于vue的列表图片选中打钩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue如何解决this.refs拿取v-for下元素undefine问题

    vue如何解决this.refs拿取v-for下元素undefine问题

    这篇文章主要介绍了vue如何解决this.refs拿取v-for下元素undefine问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • vue服务器代理proxyTable配置如何解决跨域

    vue服务器代理proxyTable配置如何解决跨域

    这篇文章主要介绍了vue服务器代理proxyTable配置如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 详解el Cascader懒加载数据回显示例

    详解el Cascader懒加载数据回显示例

    这篇文章主要为大家介绍了详解el Cascader懒加载数据回显示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 详谈Object.defineProperty 及实现数据双向绑定

    详谈Object.defineProperty 及实现数据双向绑定

    这篇文章主要介绍了详谈Object.defineProperty 及实现数据双向绑定，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue 绑定使用 touchstart touchmove touchend解析

    vue 绑定使用 touchstart touchmove touchend解析

    这篇文章主要介绍了vue 绑定使用 touchstart touchmove touchend解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue过度与动画的使用及说明

    Vue过度与动画的使用及说明

    本文详细介绍了Vue.js的过渡与动画机制,从基础语法到实战应用,涵盖CSS类名、JavaScript钩子、列表过渡、状态过渡等高级技巧,并提供了性能优化建议,通过系统学习,读者可以掌握如何实现流畅的页面过渡与细腻的动画效果,提升用户体验
    2026-01-01
  • 使用Vue纯前端实现发送短信验证码并实现倒计时

    使用Vue纯前端实现发送短信验证码并实现倒计时

    在实际的应用开发中,涉及用户登录验证、密码重置等场景时,通常需要前端实现发送短信验证码的功能,以提升用户体验和安全性,以下是一个简单的前端实现,演示了如何在用户点击发送验证码按钮时触发短信验证码的发送,并开始一个倒计时
    2024-04-04
  • Vue3 setup中使用$refs的方法详解

    Vue3 setup中使用$refs的方法详解

    在 Vue 3 中的 Composition API 中,$refs 并不直接可用于 setup 函数,但是实际工作中确实有需求,那么该如何解决呢,本文为大家整理了两个方案,希望对大家有所帮助
    2023-08-08

最新评论