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

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

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

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

安装

1

yarn add -D vitepress

方式

添加 2 个文件

1
2
3

module.exports = {
  extend: '@vuepress/theme-default'
}

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>

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

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

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

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

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

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

前言

事情的起因是，我需要一个存放未分类整理知识点，以及收藏转载文章的私人知识库，和 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 来加密内容，你可以直接查看它的英文官方文档。

前提

已安装 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 组件写单元测试，mount这个组件时，会遇到找不到 $t 的报错。

1

<p>{{ $t('message.hello' }}</p>

1

TypeError: _vm.$t is not a function

添加一个参数

当前 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

在 Github 上面搜索 “lottery”，发现类似的项目挺多的，有 Electron 实现的，可以打包成 exe，也有原生 js 实现的，浏览器打开。

这次是用 Vue 做了一个编号抽奖，一个转盘抽奖，放在一起，练手。

预览：http://lottery.imaegoo.com/

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

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

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

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

结论

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

过程

首先我的用法是这样的：

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遇到的问题，尝试了几个小时才搞明白，大佬应该一眼就能看出什么问题吧……

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

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

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>

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的表现显然是异常的，点击不能成功地切换选中状态，而在点击之后再点击其他复选框，才会“有延迟地”切换状态。