Vue中const、var、let的核心區(qū)別及最佳實(shí)踐
var 基本不用優(yōu)先用 const需要修改變量用 let
我用最簡(jiǎn)單、最實(shí)用的方式給你講清楚三者的核心區(qū)別：
一、一句話總結(jié)
- var：老舊、不推薦，有變量提升、無塊級(jí)作用域，容易出 bug
- let：聲明可修改的變量，有塊級(jí)作用域，不能重復(fù)聲明
- const：聲明不可修改的常量（引用類型可改內(nèi)容），最常用
二、核心區(qū)別對(duì)比表
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函數(shù)級(jí) / 全局 | 塊級(jí) {} | 塊級(jí) {} |
| 能否修改值 | 能 | 能 | 基礎(chǔ)類型不能改 |
| 能否重復(fù)聲明 | 能 | 不能 | 不能 |
| 變量提升 | 有（會(huì) undefined） | 有（但不能用） | 有（但不能用） |
| 推薦程度 | 不推薦 | 必要時(shí)用 | 優(yōu)先用 |
塊級(jí)作用域：if/for/while 里的 {} 包裹的區(qū)域，let/const 在外面訪問不到。
三、逐一看用法（Vue 中真實(shí)場(chǎng)景）
2.1 var（廢棄，別用）
// Vue 中千萬別這么寫
function test() {
var a = 10
if (true) {
var a = 20 // 會(huì)覆蓋外面的 a！
}
console.log(a) // 20（污染變量，危險(xiǎn)）
}
缺點(diǎn)：沒有塊級(jí)作用域、變量提升、可重復(fù)聲明，極易造成 bug。
2.2 let（聲明會(huì)變的變量）
適用場(chǎng)景：計(jì)數(shù)器、循環(huán)變量、需要重新賦值的變量
// Vue 中常用
let count = 0
count = 1 // 可以修改
for (let i = 0; i < 5; i++) {
// i 只在循環(huán)里有效
}
// console.log(i) // 報(bào)錯(cuò)，外部訪問不到
2.3 const（聲明不變的變量，Vue 最常用）
適用場(chǎng)景：定義常量、導(dǎo)入模塊、對(duì)象 / 數(shù)組、函數(shù)、ref/reactive 等
基礎(chǔ)類型：值不能改
const PI = 3.14 PI = 3.1415 // 報(bào)錯(cuò)，不能重新賦值
引用類型（對(duì)象 / 數(shù)組）：可以改內(nèi)容
這是 Vue 中最常見的用法！
// Vue3 中定義響應(yīng)式數(shù)據(jù)（最標(biāo)準(zhǔn)寫法）
const user = { name: '小明' }
const list = [1, 2, 3]
user.name = '小紅' // 可以改內(nèi)部屬性
list.push(4) // 可以改數(shù)組內(nèi)容
user = {} // 報(bào)錯(cuò)，不能重新賦值整個(gè)對(duì)象
四、Vue 中最實(shí)用的使用規(guī)則（直接背）
90% 的情況用 const
- 定義
ref/reactive響應(yīng)式數(shù)據(jù) - 導(dǎo)入組件 / 工具函數(shù)
- 定義對(duì)象、數(shù)組、函數(shù)
只有變量需要重新賦值時(shí)，用 let
- 計(jì)數(shù)器
let i = 0 - 循環(huán)變量
- 需要多次賦值的普通變量
永遠(yuǎn)不要用 var
現(xiàn)代 Vue 項(xiàng)目（Vue3/Vue2 + webpack/vite）完全不需要 var。
五、Vue3 中最標(biāo)準(zhǔn)的寫法示例
<script setup>
// 1. 導(dǎo)入：用 const
import { ref, reactive } from 'vue'
// 2. 響應(yīng)式數(shù)據(jù)：用 const（內(nèi)部可改，整體不能改）
const count = ref(0)
const user = reactive({ name: '張三' })
// 3. 函數(shù)：用 const
const add = () => {
count.value++
}
// 4. 需要重新賦值的變量：用 let
let timer = null
timer = setTimeout(() => {})
</script>
六、總結(jié)
- var：老舊、坑多，別用
- let：變量需要重新賦值時(shí)用
- const：聲明不重新賦值的變量（對(duì)象 / 數(shù)組內(nèi)部可改），Vue 首選
到此這篇關(guān)于Vue中const、var、let的核心區(qū)別及最佳實(shí)踐的文章就介紹到這了,更多相關(guān)Vue const、var、let區(qū)別與實(shí)踐內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了修改Vue打包后的默認(rèn)文件名操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05
vuex中this.$store.commit和this.$store.dispatch的基本用法實(shí)例
在vue的項(xiàng)目里常常會(huì)遇到父子組件間需要進(jìn)行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue3防重復(fù)點(diǎn)擊指令clickOnce使用方法
使用Vue 框架開發(fā)項(xiàng)目中,遇到個(gè)問題,就是在用戶提交數(shù)據(jù)時(shí),如果連續(xù)多次點(diǎn)擊按鈕,會(huì)觸發(fā)多次,導(dǎo)致數(shù)據(jù)異常,這篇文章主要介紹了Vue3防重復(fù)點(diǎn)擊指令clickOnce使用的相關(guān)資料,需要的朋友可以參考下2026-03-03
Vue3的Composition API是一個(gè)全新的API，它允許開發(fā)人員將Vue組件中的邏輯封裝在單獨(dú)的功能性組合中，而不是依賴于Vue選項(xiàng)對(duì)象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07
vue如何通過點(diǎn)擊事件實(shí)現(xiàn)頁面跳轉(zhuǎn)詳解
頁面跳轉(zhuǎn),我們一般都通過路由跳轉(zhuǎn)實(shí)現(xiàn),通常情況下可直接使用router-link標(biāo)簽實(shí)現(xiàn)頁面跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于vue如何通過點(diǎn)擊事件實(shí)現(xiàn)頁面跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2022-07-07
Vue.js與 ASP.NET Core 服務(wù)端渲染功能整合
本文通過案例給大家詳細(xì)分析了ASP.NET Core 與 Vue.js 服務(wù)端渲染,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Vue.js中關(guān)于“{{}}”的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Axios提供了簡(jiǎn)潔一致的API,使得發(fā)送HTTP請(qǐng)求變得非常容易,無論是GET、POST、PUT還是DELETE等請(qǐng)求,都可以通過簡(jiǎn)潔的語法輕松實(shí)現(xiàn),這篇文章主要介紹了Vue3中Axios的使用附完整代碼,需要的朋友可以參考下2025-06-06
Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信
本篇文章主要介紹了Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12