vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3前置必备JS知识

Vue3前置必备JavaScript知识之从基础到实战进阶

作者：phltxy

这篇文章主要介绍了Vue3前置必备JavaScript知识之从基础到实战进阶的相关资料,从变量与常量、模版字符串、对象操作、解构赋值、箭头函数、数组高频方法、Promise+Async/Await到模块化,全面夯实了开发者的基础,需要的朋友可以参考下

前言

在前端开发领域，Vue3已成为主流框架之一，而扎实的JavaScript基础是掌握Vue3的关键前提。本文将围绕Vue3开发中高频使用的JS核心知识点展开，结合实际代码案例，帮助开发者快速夯实基础，为Vue3学习之路扫清障碍。

一、变量与常量：let与const的正确使用

在JavaScript中，变量和常量的声明方式直接影响代码的可读性和稳定性，也是Vue3开发中最基础的语法之一。

1. 变量声明：let

let用于声明可修改的变量，支持重复赋值，是日常开发中最常用的声明方式：

let name = 'Jack';
name = 'Bit'; // 合法，变量值可修改
let age = 18;
age = 20; // 合法，数值类型可更新

2. 常量声明：const

const用于声明不可修改的常量，但需注意引用类型的特殊行为：

const PI = 3.14;
// PI = 3.1415; // 非法，基本类型常量不可修改

// 引用类型（数组、对象）的特殊情况
const arr = [1, 2, 3];
arr.push(4); // 合法，数组元素可增删
arr.shift(); // 合法，删除数组第一个元素

const user = { name: 'vue3', age: 9 };
user.birth = 2015; // 合法，可添加属性
user.age = 10; // 合法，可修改属性值

核心原理：const限制的是变量的内存地址不可变，而数组、对象的元素/属性修改不会改变其内存地址，因此允许操作。

二、模版字符串：简化字符串操作

传统字符串拼接繁琐且易出错，模版字符串（反引号 声明）完美解决了这一问题，是Vue3模板语法的重要基础。

1. 核心优势

// 传统字符串（繁琐）
const htmlStr = '<div class="hot-goods-box"><h1>热门商品</h1><p>卖爆了卖爆了卖爆了</p></div>';

// 模版字符串（简洁）
const htmlStr = `<div class="hot-goods-box">
  <h1>热门商品</h1>
  <p>卖爆了卖爆了卖爆了</p>
</div>`;

let name = 'Bit';
let age = 9;
// 模版字符串嵌入表达式
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的核心数据结构，Vue3组件的props、data等核心概念均基于对象，掌握高效的对象操作技巧能大幅提升开发效率。

1. 取值方式

const obj = { name: 'vue3', age: 9 };
console.log(obj.name); // 输出：vue3
console.log(obj.age); // 输出：9

const obj = { name: 'vue3', age: 9 };
let key = 'name';
console.log(obj[key]); // 输出：vue3（动态获取属性值）
// 注意：obj.key 等价于 obj['key']，而非动态变量key

2. 对象简写

当属性名与变量名一致，或定义对象方法时，可使用简写语法简化代码：

// 属性简写（属性名=变量名）
let min = 1;
let max = 99;
const obj = { min, max }; // 等价于 { min: min, max: max }

// 方法简写（省略:function）
const obj = {
  fn() { // 等价于 fn: function() {}
    console.log('对象方法简写');
  }
};

四、解构赋值：高效提取数据

解构赋值是ES6的核心特性之一，Vue3中获取props、路由参数等场景高频使用，能快速从数组或对象中提取目标数据。

1. 数组解构

适用于有序数据的提取，支持跳过元素、剩余元素收集：

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. 对象解构

适用于无序数据的提取，支持指定别名、剩余属性收集：

const obj = {
  name: '比特教育科技',
  age: 9,
  address: '陕西省西安市高新区沣惠南路34号'
};
// 提取指定属性
const { age, address } = obj; // age=9, address=对应值
// 给属性起别名（避免变量冲突）
const { name: uname } = obj; // uname='比特教育科技'
// 提取部分属性，剩余属性收集到rest
const { name, ...rest } = obj; // rest={age:9, address:...}

五、箭头函数：简洁的函数写法

箭头函数是Vue3回调函数（如数组方法、Promise回调）的常用写法，具有简洁语法和绑定外层this的特性。

1. 基本语法

// 无参数函数
const fn = () => { console.log('无参数箭头函数'); };

// 单个参数（可省略括号）
const log = arg => { console.log(arg); };

// 多个参数
const add = (x, y) => { return x + y; };

// 函数体只有一行（可省略大括号和return）
const add = (x, y) => x + y;

// 返回对象（需用小括号包裹，避免歧义）
const state = () => ({ token: 'xxxx', userInfo: { name: 'admin' } });

2. 核心应用场景

Vue3中常用于数组方法回调、定时器回调等场景：

// 数组遍历回调
const arr = [1, 2, 3];
arr.forEach(item => console.log(item));

// 定时器回调
setTimeout(() => {
  console.log('2秒后执行');
}, 2000);

六、数组高频方法：数据处理利器

数组是Vue3中存储列表数据的主要载体，掌握以下高频方法能高效处理数据渲染、筛选、转换等需求。

方法功能描述核心用法
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()遍历数组arr.forEach((item, index) => {})
filter()筛选元素（返回新数组）arr.filter(item => item % 2 === 0)（筛选偶数）
map()映射转换（返回新数组）arr.map(item => item * 2)（元素翻倍）
every()检测所有元素是否满足条件arr.every(item => item > 10)（是否都大于10）
reduce()汇总计算（求和、统计等）arr.reduce((prev, item) => prev + item, 0)（求和）

实战示例：reduce统计商品总数

const goodsList = [
  { id: 1, name: '篮球', num: 1 },
  { id: 2, name: '玩具', num: 3 },
  { id: 3, name: '书籍', num: 2 }
];
// 统计商品总数量
const totalNum = goodsList.reduce((prev, item) => prev + item.num, 0);
console.log(totalNum); // 输出：6

七、Promise+Async/Await：异步编程终极方案

Vue3中发送网络请求、处理异步逻辑时，Promise+Async/Await是核心方案，能彻底解决回调地狱问题。

1. 为什么需要Promise？

传统回调嵌套（回调地狱）可读性差、维护困难：

// 回调地狱示例
setTimeout(() => {
  console.log(1);
  setTimeout(() => {
    console.log(2);
    setTimeout(() => {
      console.log(3);
    }, 1000);
  }, 1000);
}, 2000);

2. Promise基本使用

Promise通过链式调用消除回调嵌套：

// 封装延迟函数
function delay(duration, n) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(n);
    }, duration);
  });
}

// 链式调用
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调用

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规范可实现代码的拆分、复用和管理。

1. 模块化配置

在项目的package.json中添加配置，启用ES Module：

{
  "type": "module"
}

2. 两种导出与导入方式

// utils/min.js
export default function min(m, n) {
  return m > n ? n : m;
}

// index.js 导入
import min from './utils/min.js';
console.log(min(12, 45)); // 输出：12

// utils/math.js
export function add(x, y) { return x + y; }
export function sub(x, y) { return x - y; }

// index.js 导入
import { add, sub } from './utils/math.js';
console.log(add(33, 18)); // 输出：51
console.log(sub(33, 18)); // 输出：15

总结

以上这些JavaScript知识点是Vue3开发的基石，涵盖了数据声明、字符串操作、数据结构处理、异步编程和模块化等核心场景。掌握这些知识后，无论是理解Vue3的响应式原理、组件通信，还是开发实战项目，都能事半功倍。

建议结合实际案例多做练习，将这些语法融入日常开发，为后续深入学习Vue3的Composition API、Vuex、Vue Router等高级特性打下坚实基础。如果需要完整的代码示例或项目实战，可以参考代码仓库进一步学习。

到此这篇关于Vue3前置必备JavaScript知识之从基础到实战进阶的文章就介绍到这了,更多相关Vue3前置必备JS知识内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文