关于vue3:未设置标题的文章

vue-awesome-console,一个舒服的 vue3 打印变量的工具

它能够帮忙你在 console.log(某些响应变量) 的时候,从一大堆的 Proxy computed ref 对象及其办法中解脱进去,分心打印你想看到的原始值。当然,它也齐全能够像console.log一样,打印一般的js数据类型、窗口节点对象

用法:

// 在src/app.js等根文件下

import vlog from 'vue-awesome-console'
// 你能够抉择将 vlog 办法挂在 console 对象上,而后像应用 console.log 一样应用 console.vlog
// 同时你也能够依据我的项目中的开发/生产模式,进行不同的应用形式
if ( process.env.NODE_ENV === 'development' ) {
    window.console.vlog = vlog
} else {
    window.console.vlog = () => {}
}

情景

个别的 console.log 打印

比方在某组件中,打印 vue-routerconst route = useRoute() 中的 route,其后果是:

{Proxy {path: ComputedRefImpl, name: ComputedRefImpl, params: ComputedRefImpl, query: ComputedRefImpl, hash: ComputedRefImpl, …}
// 开展后
{Proxy {path: ComputedRefImpl, name: ComputedRefImpl, params: ComputedRefImpl, query: ComputedRefImpl, hash: ComputedRefImpl, …}
[[Handler]]: Object
[[Target]]: Object
fullPath: ComputedRefImpl {dep: undefined, __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
hash: ComputedRefImpl {dep: undefined, __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
matched: ComputedRefImpl {dep: Set(2), __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
meta: ComputedRefImpl {dep: undefined, __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
name: ComputedRefImpl {dep: undefined, __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
params: ComputedRefImpl {dep: Set(1), __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
path: ComputedRefImpl {dep: undefined, __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
query: ComputedRefImpl {dep: undefined, __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
redirectedFrom: ComputedRefImpl {dep: undefined, __v_isRef: true, _dirty: false, effect: ReactiveEffect, _setter: ƒ, …}
[[Prototype]]: Object
[[IsRevoked]]: false

console.vlog 打印以上的 route 变量

{path: '/home/welcome', name: 'welcome', params: {…}, query: {…}, fullPath: '/home/welcome', …}
// 开展后
fullPath: "/home/welcome"
matched: (2) [{…}, {…}]
meta: {}
name: "welcome"
params: {}
path: "/home/welcome"
query: {}
redirectedFrom: {fullPath: '/home/welcome', path: '/home/welcome', query: {…}, hash: '', name: 'welcome', …}
[[Prototype]]: Object

兴许你认为 JSON.parse(JSON.stringify(obj)) 能够起雷同的作用,当然,你得容忍某些情景下,某些变量在这个貌似深拷贝的办法下报错或数据失落什么的/滑鸡

注:以后仅实用于 vue3

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据