共计 2107 个字符，预计需要花费 6 分钟才能阅读完成。
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]]: 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]]: falseconsole.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
正文完