Vue 2 this.$emit 方法无效问题的解决

分享一个 Vue 2 $emit 不生效问题的解决,子组件向父组件 $emit 事件,没有报错,但父组件就是收不到事件。首先排除拼错事件名称等基本错误。

最终发现原因是:由于我将 $emit 写在了异步方法里,子组件在还没 $emit 之前就销毁了,此时再调用 $emit 不会有任何报错,也不会有任何效果,特此记录。

阅读更多

体验 VitePress:文档编译还能这么快!

基于 VuePress 的项目文档的编译速度一直让我很苦恼,启动一次 dev server 要大约半分钟的时间,而且哪怕只有一个 Hello World,速度也是这么慢。相比之下,Hexo 都比它快。这当然不只是 VuePress 本身的问题,要说还得归咎于 Webpack。

于是 Vite 诞生了,一起诞生的还有 VitePress。好耶!虽然 VitePress 仍处于 WIP 阶段,告诉我们不要在任何地方使用,但我们可以提前对比一下,它究竟能比 VuePress 快多少?我们使用基于 VuePress 的 Twikoo 文档测试一下。

安装

1
yarn add -D vitepress
阅读更多

VuePress 自定义默认主题页眉页脚

方式

添加 2 个文件

.vuepress/theme/index.js
1
2
3
module.exports = {
extend: '@vuepress/theme-default'
}
.vuepress/theme/layouts/Layout.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<ParentLayout>
<template #sidebar-top>
<div>My custom sidebar-top</div>
</template>
<template #sidebar-bottom>
<div>My custom sidebar-bottom</div>
</template>
<template #page-top>
<div>My custom page-top</div>
</template>
<template #page-bottom>
<div>My custom page-bottom</div>
</template>
</ParentLayout>
</template>

<script>
import ParentLayout from '@parent-theme/layouts/Layout.vue'

export default {
name: 'Layout',
components: {
ParentLayout
}
}
</script>
阅读更多

博客已启用 Twikoo 评论系统

评论系统一直是静态网站的痛点。

  • Valine:安全性不高
  • Gitalk:需要评论者注册Github
  • Disqus:需要注册,国内访问不畅
  • 畅言:广告多,需要验证手机号

难道就没有一个完美的方案?

咕咕咕了近三个月后,我自己搞出了一套评论系统,并命名为 Twikoo。

  • 成本上,腾讯云云开发环境可以免费搭建
  • 安全性上,使用腾讯云云函数开发接口,不开放一丁点数据库权限,未来更新将接入 Akismet 反垃圾检查
  • 易用性上,支持点赞、邮件通知、微信通知(限博主),未来会增加更多玩法

欢迎访问 twikoo.js.org 了解更多。

阅读更多

VuePress 密码加密文章

前言

事情的起因是,我需要一个存放未分类整理知识点,以及收藏转载文章的私人知识库,和 iMaeGoo’s Blog 区别开来。

我尝试过简书、语雀、Evernote、OneNote、有道云笔记,对它们的 markdown 支持、导出能力、搜索能力、容量、安全性都有体会。

频繁的整顿让我对其安全性产生担忧

最后我决定建一个私人 Git 仓库,用 markdown 来记笔记。然后通过 CI/CD 自动构建到一个叫 iMaeGoo’s Diary 的 VuePress 网站。写笔记 Notepad + Git 就能搞定,还能自由选择多种多样的 markdown 编辑器,手机端也可以通过在线 IDE 更新内容,VuePress 的搜索非常好用,安全性也完全在自己的掌控范围之内。

反正是知识库嘛,我配置了完全公开,方便自己随时随地查看,但由于是未经整理的知识库,也不建议访客去看啦。

问题就来了,有些笔记包含了敏感信息,怎么在公开的知识库中保护这类信息?

在寻找 VuePress 加密时,我发现了 vuepress-plugin-encrypt 这个好用的插件,使用了 aes-128-ctr 来加密内容,你可以直接查看它的英文官方文档

阅读更多

多种方式解决 Windows CMD 中 vue-cli-service 不是内部或外部命令

前提

已安装 Vue 脚手架

1
npm install -g @vue/cli

现象

找不到 vue-cli-service 命令

1
'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.

经过搜索,发现这个问题只在 Windows 下存在。

装了脚手架应该会在 node 目录产生 vue-cli-service.cmd 的文件,实际没有产生,不过在全局 node_modules 下是有的。

有说清理 node_modules 重新安装可以解决的,试了不管用,全局卸载脚手架重新安装也不管用,就算管用也比较麻烦,于是我找到了几个间接使用方法——

阅读更多

Vue Router 向 URL query 添加、删除参数

添加一个参数

当前 URL:http://localhost/home?keyword=example

1
this.$router.replace({ query: { ...this.$route.query, code: '1' } })

最终 URL:http://localhost/home?keyword=example&code=1

删除一个参数

我所使用的 Vue Router 版本为 3.0.3,删除参数比较麻烦。

当前 URL:http://localhost/home?keyword=example&code=1

无效方法
1
2
delete this.$route.query.code
this.$router.replace({ query: this.$route.query }) // 地址栏无反应
有效方法
1
2
3
4
let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝
delete newQuery.code
// 如果有引入 lodash, 可以写成: let newQuery = _.omit(this.$route.query, 'code')
this.$router.replace({ query: newQuery })

最终 URL:http://localhost/home?keyword=example

阅读更多

van-list 一直触发加载问题的排查

移动端分页一般都是向下滑动加载更多,Vant 组件库提供了 van-list 来实现这一功能。

List 组件通过loadingfinished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可。若数据已全部加载完毕,则直接将finished设置成true即可。

实际应用中发现,即使内部元素已经填满一整屏,仍然会触发加载,直到我模拟的20多页全部加载完才停下来。

我没有给这个问题写专门的 CodePen demo,比较麻烦,碰到的人也不一定多。

结论

van-list 会在内容之后增加一个 placeholder,通过 placeholder 的位置判断内容是否已填充满屏。
van-list 本身为 flex 布局时,flex-direction 必须是 column(或 column-reverse)。

过程

首先我的用法是这样的:

template
1
2
3
4
5
6
7
<van-list> <!-- flex -->
<van-grid>
<van-grid-item />
<van-grid-item />
<van-grid-item />
</van-grid>
</van-list>

首先看文档,英文文档没有提到,但中文文档有以下一段话:

使用 float 布局后一直触发加载?
若 List 的内容使用了 float 布局,可以在容器上添加van-clearfix类名来清除浮动,使得 List 能正确判断元素位置

检查了一下,我没有在使用 float 布局呀。

阅读更多
直接操作 Vue data 中不存在的属性导致的 v-model 绑定异常问题

直接操作 Vue data 中不存在的属性导致的 v-model 绑定异常问题

初学Vue遇到的问题,尝试了几个小时才搞明白,大佬应该一眼就能看出什么问题吧……

需要注意,不要直接在JS中操作一个Vue data对象中不存在的属性,如果同时有通过v-model绑定到该对象的不存在的属性时,会出现诡异的行为表现,console中不会报出任何 warnerror

需求是,实现三个复选框,第一个复选框初始为选中状态,一开始写出来是这样的——

HTML
1
2
3
4
5
<div id="app" style="margin: 10px;">
<van-checkbox v-for="box in checkboxes" :key="box.id" v-model="box.selected">
复选框 {{ box.title }}
</van-checkbox>
</div>
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
el: '#app',
data () {
return {
checkboxes: [
{ id: 1, title: 'a' },
{ id: 2, title: 'b' },
{ id: 3, title: 'c' }
]
}
},
created () {
this.checkboxes[0].selected = true
}
})

试下效果:

See the Pen vue-v-model-not-work by iMaeGoo (@iMaeGoo) on CodePen.

复选框a的表现显然是异常的,点击不能成功地切换选中状态,而在点击之后再点击其他复选框,才会“有延迟地”切换状态。

阅读更多