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-router ， const 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]]: ObjectfullPath: 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