重操旧业,继续码农生活,温故vue moment类库和new Date()

技术方面,越使用越熟练,越放越陌生,确实是这样。这几年在技术方面的投入减少了很多,工作职责发生了一些变化,更多的是一些比较杂的事情,工作本身也是心力交瘁。和领导沟通了下,说了些自己的想法,如果全局的事情做不好,就把具体的事情做好,也算是尽自己一些绵簿之力,至于职业或者未来可见的天花板,就这样吧,选择就是这样,失去了一些东西也得到了一些东西,如果无法改变现状就改变自己。人改变自己都很难.

从最初中断的地方重新开始,比如前端当年用的Vue 2,VS还是用的VS2019.几年过去了,需要再温故知新下了。

从一个开胃小菜开始。Vue中moment的使用,最近开发了一个小功能,用到了moment中的一些日期函数,查了一些资料,熟悉了下moment中常用的日期功能。

在Vue项目中,new Date()是JavaScript内置的对象,用于处理日期和时间;而moment是一个第三方库,提供了更丰富的日期操作功能。以下是它们的主要区别:

‌基本性质‌:

new Date()是原生JavaScript对象,无需额外安装即可使用;moment是一个独立的库,需要通过npm或yarn安装后引入。‌

‌功能丰富度‌:

new Date()支持基本的日期获取(如getFullYear、getMonth)和格式化方法(如toLocaleString),但复杂操作(如日期加减、相对时间计算)需要手动实现;moment提供了大量内置方法,例如format格式化、startOf/endOf设置日期边界、add/subtract进行时间计算,以及多语言支持。‌

‌使用便捷性‌:

new Date()直接通过实例调用方法,语法简单但灵活性有限;moment通过链式调用简化操作,例如moment().format('YYYY-MM-DD')可直接输出指定格式,且支持自定义解析和过滤器。‌

‌性能与体积‌:

new Date()作为原生对象,无额外体积开销;moment库体积较大(约未压缩时几十KB),可能影响项目加载速度,而轻量级替代品如Dayjs更注重性能。‌

6

‌国际化支持‌:

new Date()的格式化依赖本地环境设置,国际化处理需额外代码;moment内置多语言支持,可通过locale方法轻松切换中文等语言。‌

在实际开发中,若需求简单,new Date()足够高效;若涉及复杂日期逻辑(如时间范围筛选、格式转换),moment能提升开发效率,但需权衡体积影响。‌

1.moment 是一个 JavaScript 日期处理类库。

(1)引入库:npm install moment

(2)在main.js中全局引入,也可单独引入

import moment from "moment"

Vue.prototype.$moment = moment;

2.new Date()

let time = new Date(); //获取当前时间

let year = time.getFullYear(); //获取年 2025

let month = time.getMonth() + 1; //获取月 12

let day = time.getDate(); //获取天 15

let h = time.getHours(); //获取小时 21

let m = time.getMinutes(); //获取分钟 56

let s = time.getSeconds(); //获取秒 37

let weekDay = time.getDay(); //获取星期

相关推荐
牛奶7 小时前
Vue 基础理论 & API 使用
前端·vue.js·面试
牛奶7 小时前
Vue 底层原理 & 新特性
前端·vue.js·面试
pe7er8 小时前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
_AaronWong19 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
wuhen_n20 小时前
双端 Diff 算法详解
前端·javascript·vue.js
爱勇宝20 小时前
别再混用了!import.meta.env 与 process.env 的本质差异一次讲透
前端·javascript·vue.js
从文处安2 天前
「九九八十一难」组合式函数到底有什么用?
前端·vue.js
用户11489669441052 天前
VUE3响应式原理——从零解析
vue.js
用户83040713057012 天前
SPA 首屏加载速度慢怎么解决?
vue.js·webpack
一枚前端小姐姐2 天前
低代码平台表单设计系统技术分析(实战三)
前端·vue.js·低代码