Vue3前置必備JavaScript知識之從基礎(chǔ)到實戰(zhàn)進階
前言
在前端開發(fā)領(lǐng)域，Vue3已成為主流框架之一，而扎實的JavaScript基礎(chǔ)是掌握Vue3的關(guān)鍵前提。本文將圍繞Vue3開發(fā)中高頻使用的JS核心知識點展開，結(jié)合實際代碼案例，幫助開發(fā)者快速夯實基礎(chǔ)，為Vue3學(xué)習(xí)之路掃清障礙。
一、變量與常量：let與const的正確使用
在JavaScript中，變量和常量的聲明方式直接影響代碼的可讀性和穩(wěn)定性，也是Vue3開發(fā)中最基礎(chǔ)的語法之一。
1. 變量聲明：let
let用于聲明可修改的變量，支持重復(fù)賦值，是日常開發(fā)中最常用的聲明方式：
let name = 'Jack'; name = 'Bit'; // 合法，變量值可修改 let age = 18; age = 20; // 合法，數(shù)值類型可更新
2. 常量聲明：const
const用于聲明不可修改的常量，但需注意引用類型的特殊行為：
const PI = 3.14;
// PI = 3.1415; // 非法，基本類型常量不可修改
// 引用類型（數(shù)組、對象）的特殊情況
const arr = [1, 2, 3];
arr.push(4); // 合法，數(shù)組元素可增刪
arr.shift(); // 合法，刪除數(shù)組第一個元素
const user = { name: 'vue3', age: 9 };
user.birth = 2015; // 合法，可添加屬性
user.age = 10; // 合法，可修改屬性值
核心原理：const限制的是變量的內(nèi)存地址不可變，而數(shù)組、對象的元素/屬性修改不會改變其內(nèi)存地址，因此允許操作。
二、模版字符串：簡化字符串操作
傳統(tǒng)字符串拼接繁瑣且易出錯，模版字符串（反引號 聲明）完美解決了這一問題，是Vue3模板語法的重要基礎(chǔ)。
1. 核心優(yōu)勢
- 支持任意換行：無需拼接換行符，直接保留代碼格式，特別適合構(gòu)建HTML模板：
// 傳統(tǒng)字符串（繁瑣） const htmlStr = '<div class="hot-goods-box"><h1>熱門商品</h1><p>賣爆了賣爆了賣爆了</p></div>'; // 模版字符串（簡潔） const htmlStr = `<div class="hot-goods-box"> <h1>熱門商品</h1> <p>賣爆了賣爆了賣爆了</p> </div>`;
- 嵌入表達(dá)式：通過
${表達(dá)式}語法直接嵌入變量、運算或三元表達(dá)式，替代繁瑣的+拼接：
let name = 'Bit';
let age = 9;
// 模版字符串嵌入表達(dá)式
const str = `My name is ${name}, I am ${age} years old, ${age >= 18 ? '已成年' : '未成年'}`;
console.log(str); // 輸出：My name is Bit, I am 9 years old, 未成年
三、對象操作：取值與簡寫技巧
對象是JavaScript的核心數(shù)據(jù)結(jié)構(gòu)，Vue3組件的props、data等核心概念均基于對象，掌握高效的對象操作技巧能大幅提升開發(fā)效率。
1. 取值方式
- 點語法取值：簡單直接，適用于已知屬性名的場景：
const obj = { name: 'vue3', age: 9 };
console.log(obj.name); // 輸出：vue3
console.log(obj.age); // 輸出：9
- 中括號取值：支持動態(tài)屬性名（屬性名為變量），是Vue3中處理動態(tài)數(shù)據(jù)的常用方式：
const obj = { name: 'vue3', age: 9 };
let key = 'name';
console.log(obj[key]); // 輸出：vue3（動態(tài)獲取屬性值）
// 注意：obj.key 等價于 obj['key']，而非動態(tài)變量key
2. 對象簡寫
當(dāng)屬性名與變量名一致，或定義對象方法時，可使用簡寫語法簡化代碼：
// 屬性簡寫（屬性名=變量名）
let min = 1;
let max = 99;
const obj = { min, max }; // 等價于 { min: min, max: max }
// 方法簡寫（省略:function）
const obj = {
fn() { // 等價于 fn: function() {}
console.log('對象方法簡寫');
}
};
四、解構(gòu)賦值：高效提取數(shù)據(jù)
解構(gòu)賦值是ES6的核心特性之一，Vue3中獲取props、路由參數(shù)等場景高頻使用，能快速從數(shù)組或?qū)ο笾刑崛∧繕?biāo)數(shù)據(jù)。
1. 數(shù)組解構(gòu)
適用于有序數(shù)據(jù)的提取，支持跳過元素、剩余元素收集：
const arr = [11, 22, 33]; // 提取全部元素 let [a, b, c] = arr; // a=11, b=22, c=33 // 跳過第一個元素，提取后兩個 let [, b, c] = arr; // b=22, c=33 // 提取第一個元素，剩余元素收集到rest let [a, ...rest] = arr; // a=11, rest=[22, 33]
2. 對象解構(gòu)
適用于無序數(shù)據(jù)的提取，支持指定別名、剩余屬性收集：
const obj = {
name: '比特教育科技',
age: 9,
address: '陜西省西安市高新區(qū)灃惠南路34號'
};
// 提取指定屬性
const { age, address } = obj; // age=9, address=對應(yīng)值
// 給屬性起別名（避免變量沖突）
const { name: uname } = obj; // uname='比特教育科技'
// 提取部分屬性，剩余屬性收集到rest
const { name, ...rest } = obj; // rest={age:9, address:...}
五、箭頭函數(shù)：簡潔的函數(shù)寫法
箭頭函數(shù)是Vue3回調(diào)函數(shù)（如數(shù)組方法、Promise回調(diào)）的常用寫法，具有簡潔語法和綁定外層this的特性。
1. 基本語法
// 無參數(shù)函數(shù)
const fn = () => { console.log('無參數(shù)箭頭函數(shù)'); };
// 單個參數(shù)（可省略括號）
const log = arg => { console.log(arg); };
// 多個參數(shù)
const add = (x, y) => { return x + y; };
// 函數(shù)體只有一行（可省略大括號和return）
const add = (x, y) => x + y;
// 返回對象（需用小括號包裹，避免歧義）
const state = () => ({ token: 'xxxx', userInfo: { name: 'admin' } });
2. 核心應(yīng)用場景
Vue3中常用于數(shù)組方法回調(diào)、定時器回調(diào)等場景：
// 數(shù)組遍歷回調(diào)
const arr = [1, 2, 3];
arr.forEach(item => console.log(item));
// 定時器回調(diào)
setTimeout(() => {
console.log('2秒后執(zhí)行');
}, 2000);
六、數(shù)組高頻方法：數(shù)據(jù)處理利器
數(shù)組是Vue3中存儲列表數(shù)據(jù)的主要載體，掌握以下高頻方法能高效處理數(shù)據(jù)渲染、篩選、轉(zhuǎn)換等需求。
| 方法 | 功能描述 | 核心用法 |
|---|---|---|
| push() | 尾部添加元素 | arr.push(44) |
| unshift() | 頭部添加元素 | arr.unshift(0) |
| pop() | 尾部刪除元素 | arr.pop() |
| shift() | 頭部刪除元素 | arr.shift() |
| splice() | 任意位置增刪 | arr.splice(1, 1, 55)（索引1刪除1個，添加55） |
| includes() | 判斷是否包含元素 | arr.includes(33)（返回布爾值） |
| forEach() | 遍歷數(shù)組 | arr.forEach((item, index) => {}) |
| filter() | 篩選元素（返回新數(shù)組） | arr.filter(item => item % 2 === 0)（篩選偶數(shù)） |
| map() | 映射轉(zhuǎn)換（返回新數(shù)組） | arr.map(item => item * 2)（元素翻倍） |
| every() | 檢測所有元素是否滿足條件 | arr.every(item => item > 10)（是否都大于10） |
| reduce() | 匯總計算（求和、統(tǒng)計等） | arr.reduce((prev, item) => prev + item, 0)（求和） |
實戰(zhàn)示例：reduce統(tǒng)計商品總數(shù)
const goodsList = [
{ id: 1, name: '籃球', num: 1 },
{ id: 2, name: '玩具', num: 3 },
{ id: 3, name: '書籍', num: 2 }
];
// 統(tǒng)計商品總數(shù)量
const totalNum = goodsList.reduce((prev, item) => prev + item.num, 0);
console.log(totalNum); // 輸出：6
七、Promise+Async/Await：異步編程終極方案
Vue3中發(fā)送網(wǎng)絡(luò)請求、處理異步邏輯時，Promise+Async/Await是核心方案，能徹底解決回調(diào)地獄問題。
1. 為什么需要Promise？
傳統(tǒng)回調(diào)嵌套（回調(diào)地獄）可讀性差、維護困難：
// 回調(diào)地獄示例
setTimeout(() => {
console.log(1);
setTimeout(() => {
console.log(2);
setTimeout(() => {
console.log(3);
}, 1000);
}, 1000);
}, 2000);
2. Promise基本使用
Promise通過鏈?zhǔn)秸{(diào)用消除回調(diào)嵌套：
// 封裝延遲函數(shù)
function delay(duration, n) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(n);
}, duration);
});
}
// 鏈?zhǔn)秸{(diào)用
delay(2000, 1)
.then(n1 => {
console.log(n1);
return delay(1000, 2);
})
.then(n2 => {
console.log(n2);
return delay(1000, 3);
})
.then(n3 => {
console.log(n3);
});
3. Async/Await：簡化Promise調(diào)用
Async/Await是Promise的語法糖，以同步代碼的形式編寫異步邏輯，是Vue3中的首選方案：
async function log() {
const n1 = await delay(2000, 1);
console.log(n1); // 2秒后輸出1
const n2 = await delay(1000, 2);
console.log(n2); // 再1秒輸出2
const n3 = await delay(1000, 3);
console.log(n3); // 再1秒輸出3
}
log();
八、模塊化：代碼組織最佳實踐
模塊化是大型Vue3項目的必備技能，通過ES Module規(guī)范可實現(xiàn)代碼的拆分、復(fù)用和管理。
1. 模塊化配置
在項目的package.json中添加配置，啟用ES Module：
{
"type": "module"
}
2. 兩種導(dǎo)出與導(dǎo)入方式
- 默認(rèn)導(dǎo)出（export default）：一個模塊只能有一個默認(rèn)導(dǎo)出，導(dǎo)入時可自定義名稱：
// utils/min.js
export default function min(m, n) {
return m > n ? n : m;
}
// index.js 導(dǎo)入
import min from './utils/min.js';
console.log(min(12, 45)); // 輸出：12
- 按需導(dǎo)出（export）：一個模塊可多個按需導(dǎo)出，導(dǎo)入時需指定對應(yīng)名稱：
// utils/math.js
export function add(x, y) { return x + y; }
export function sub(x, y) { return x - y; }
// index.js 導(dǎo)入
import { add, sub } from './utils/math.js';
console.log(add(33, 18)); // 輸出：51
console.log(sub(33, 18)); // 輸出：15
總結(jié)
以上這些JavaScript知識點是Vue3開發(fā)的基石，涵蓋了數(shù)據(jù)聲明、字符串操作、數(shù)據(jù)結(jié)構(gòu)處理、異步編程和模塊化等核心場景。掌握這些知識后，無論是理解Vue3的響應(yīng)式原理、組件通信，還是開發(fā)實戰(zhàn)項目，都能事半功倍。
建議結(jié)合實際案例多做練習(xí)，將這些語法融入日常開發(fā)，為后續(xù)深入學(xué)習(xí)Vue3的Composition API、Vuex、Vue Router等高級特性打下堅實基礎(chǔ)。如果需要完整的代碼示例或項目實戰(zhàn)，可以參考代碼倉庫進一步學(xué)習(xí)。
到此這篇關(guān)于Vue3前置必備JavaScript知識之從基礎(chǔ)到實戰(zhàn)進階的文章就介紹到這了,更多相關(guān)Vue3前置必備JS知識內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue+golang實現(xiàn)上傳微信頭像功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
el-date-picker change事件無響應(yīng)問題及解決方案
文章總結(jié)：在使用el-date-picker組件時,如果回顯數(shù)據(jù)后change事件無法監(jiān)聽到變化,可以改用input事件,選擇日期后頁面不更新但數(shù)據(jù)變化,可以在監(jiān)聽事件中使用forceUpdate強制刷新視圖2025-12-12
這篇文章主要介紹了Vue3中引入Pinia存儲庫使用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Element el-row el-col 布局組件使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家介紹了vue2與vue3的生命周期對比，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
使用 vue 實例更好的監(jiān)聽事件及vue實例的方法
這篇文章主要介紹了使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,介紹了一種新增 vue 實例的方法，單獨監(jiān)聽事件，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue組件實現(xiàn)數(shù)字滾動抽獎效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue中的過濾器及其時間格式化,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
這篇文章主要介紹了vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
vue過濾表格數(shù)據(jù)導(dǎo)致的索引錯亂問題及解決
這段描述主要討論了在表單操作中如何正確處理表格數(shù)據(jù)的篩選和編輯,強調(diào)保持?jǐn)?shù)據(jù)源完整性和操作準(zhǔn)確性的關(guān)鍵,關(guān)鍵詞包括：數(shù)據(jù)源完整性和操作準(zhǔn)確性2026-05-05