踩坑记6 vue3、生命周期钩子、vue-devtools beta
2021.7.28
坑17（vue3、生命周期钩子、导航守卫、页面刷新）：发现页面刷新后在导航守卫afterEach()中设置的头部的面包屑、标题、标签页调整函数updateHeader()并未触发，即刷新页面无法触发afterEach()，也就无法正确显示刷新后页面的头部。
解决方法：在生命周期钩子onMounted()中调用updateHeader()，该钩子会在页面刷新后触发。以上导航守卫和生命周期钩子都写在setup()中。
注：vue3中，生命周期钩子在setup()中使用，并接收一个回调函数作为参数。详细可见参考文章或官方文档。
setup(){
function updateHeader(){
// 调整页面头部的面包屑、标题、标签页
}
// 页面刷新时不会调用
router.afterEach((to,from)=>{
updateHeader()
})
// 页面刷新时会调用
onMounted(()=>{
updateHeader()
})
}参考： 如何在Vue3中使用生命周期函数 - 知乎 (zhihu.com)
官方文档： 生命周期钩子 | Vue3中文文档 - vuejs (vue3js.cn)和 组合式 API | Vue3中文文档 - vuejs (vue3js.cn)
坑18（vue3、vue-devtools beta）：安装vue-devtools到Chrome/Edge浏览器（Firefox可以直接下github的xpi文件安装）。（成功可行的方法请看最后一段，及2021.8.13更新）
失败经历：
1、github下载的压缩包，main分支，yarn install成功，yarn run build / npm run build 均失败。
2、新建一空文件夹，命令行npm install vue-devtools，将node_modules\vue-devtools\vender文件作为扩展程序载入到浏览器Chrome/Edge，权限全开；vender下manifest.json文件中"persistent"属性置为true。启用后效果：进入vue写的网站（参考 哪些网站使用了vue？_冰雪为融的博客-CSDN博客_vue网站，ps：csdn新版博客主页也是vue写的，但旧版不是），可以点亮图标，但自己运行的网站始终为灰色，提示Vue.js not detected。
原因排查：下载版本不对，vue3对应的vue-devtools应该是6.0.0以上的beta版本。
继续尝试：
github下载最新的beta版安装包，devtools-6.0.0-beta.15，yarn install，yarn build，报错（原因见及解决方法见后附的2021.8.13更新）：
lerna ERR! yarn run build exited 1 in '@vue-devtools/shell-chrome'
lerna ERR! yarn run build stdout:
$ rm -rf ./build && cross-env NODE_ENV=production webpack --progress
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
warning package.json: No license field
'rm' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
error Command failed with exit code 1.
lerna ERR! yarn run build exited 1 in '@vue-devtools/shell-chrome'
lerna WARN complete Waiting for 1 child process to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
删除yarn.lock，yarn init，yarn install，yarn build，依然失败。
若成功，取packages\shell-chrome文件作为扩展程序载入到浏览器Chrome/Edge。
（下载很慢可以考虑换源，参考 Electron安装失败_mocoe的专栏-CSDN博客）
注：之前下过一个6.0.0-beta.6版本没报错，成功生成了shell-chrome文件，但运行报错backend.js:3253 TypeError: api.on.visitComponentTree is not a function，暂未发现有阻碍/影响运行。
最后成功的方法： Download Vue.js Devtools 6.0.0 beta 15 CRX File for Chrome - Crx4Chrome或 Vue.js Devtools_6.0.0beta15_chrome扩展插件下载_极简插件 (zzzmh.cn)直接下载扩展程序.crx文件安装。连接是目前的最新版beta-6.0.0.15。
//packages\shell-chrome\package.json
//修改后
"scripts": {
"build": "rimraf ./build && cross-env NODE_ENV=production webpack --progress"
},
//修改前
"scripts": {
"build": "rm -rf ./build && cross-env NODE_ENV=production webpack --progress"
},by 莫得感情踩坑机(限定)