踩坑记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 莫得感情踩坑机(限定)
踩坑记6 vue3、生命周期钩子、vue-devtools beta相关推荐
- Vue3 生命周期钩子函数
一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method onBeforeMount() : 组 ...
- vue3生命周期钩子函数
vue2生命周期钩子函数视图 vue3生命周期钩子函数视图 代码 // 通过配置项 beforeCreate () { console.log('beforeCreate'); }, created ...
- Vue3 - 生命周期钩子函数(组合式 API)
前言 Vue 是组件化编程,从一个组件诞生到消亡会经历很多过程,这些过程就叫做生命周期.而伴随着生命周期,给用户使用的函数,就叫钩子函数,实际为操控生命周期. 本文主要对比 Vue2 生命周期,引出并 ...
- vue生命周期钩子,vue生命周期钩子,vue生命周期钩子
说一下vue的生命周期钩子函数: vue 的生命周期11个钩子函数是按照以下的顺序来的 :(不可逆转哦,第11个除外) 一. 组件创建前后 1.beforeCreate 2.created 如,写一个 ...
- Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子
文章目录 p12 条件渲染v-if与v-show p13 列表渲染v-for p14 事件与参数和事件修饰符 p15 表单的数据双向绑定 p16 组件 与 父组件传递数据给子组件 -- 方式props ...
- Vue 生命周期钩子
Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务 处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个V ...
- Vue3 Composition API(三)——生命周期钩子、Provide函数 和 Inject函数、封装Hook案例、setup顶层编写方式
一.生命周期钩子 我们前面说过 setup 可以用来替代 data . methods . computed .watch 等等这些选项,也可以替代 生命周期钩子. 那么setup中如何使用生命周期函 ...
- vue3基础-组合式API之生命周期钩子
生命周期钩子 这些生命周期钩子注册函数只能在 setup()期间同步使用,因为它们依赖于内部的全局状态来定位当前活动的实例. 官网给出的映射如下: 示例 查看生命周期钩子的执行顺序 <templ ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- Vue生命周期钩子剖析(共12个钩子)
生命周期示意图: 生命周期及其钩子函数理解 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例:在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新 ...
最新文章
- 重庆社区计算机考试题库,2020重庆社区工作者考试题库:模拟题100题(64)
- 字节跳动 算法全四面 详细面经
- XamarinAndroid组件教程RecylerView适配器使用动画
- python 删除链表中倒数第N个节点
- 小波变换和motion信号处理(三)(转)
- python自动发送微信-Python自动定时发送微信消息
- [转载] Python的生成器
- netty依赖_Netty系列之源码解析(一)
- Firefox 使用 Chrome 浏览器的 PDF 和 Flash 插件
- android Notification 的使用
- A5如何备份oracle数据库,oracle的数据库的导入导出
- MATLAB入门教程之MATLAB的基本知识
- 中国IP网通IP地址段
- 电脑重装教程win10系统怎样重装
- LintCode 17. 子集
- 如何成为一名数据分析师
- Leetcode第412题——Fizz Buzz
- php mocking,php – Mocking Static Eloquent Models方法包括find()
- 拓嘉启远:拼多多月卡有哪两种?如何区别
- 微信企业号已停止提供企业消息会话服务器,企业微信注册时显示会话服务已经被安装了怎么解决 解决攻略教程大全...