看起来 Vue.js 很可能在本周末超越 React！

构建此项目时值得一提的事项

无论如何，

原文：https://www.ycmjason.com/blog/2018/06/14.html

快到了！快到了！

几周前我发布了vue-vs-react。

由于星级差距越来越小（我写这篇文章的时候差距是 268 颗星），我决定在我的项目中添加一个新功能。当 Vue 的星级超过 React 时，烟花会随着背景音乐绽放！

您只需在选项卡中打开网站，当 Vue 超越 React 时，您会收到背景音乐的通知！

我实在是太太太太太兴奋了！

构建此项目时值得一提的事项

首次使用$refs

使用 Vue 时，直接获取 DOM 引用的情况并不多。大多数情况都可以借助 Vue 的强大功能轻松处理。

在这个项目中，我有一个<audio>会在 时触发播放的动画vue.stars > react.stars。为此，我必须获取元素的引用并执行elem.play()。在 Vue 中获取 DOM 引用的方法是添加ref="name"。所以我只是简单地做了以下操作（参见此行）：

<audio src="..." ref="audio"></audio>

然后this.$refs.audio就会指向那个元素！现在我可以在组件内部执行了！（参见this.$refs.audio.play()这一行）this.$refs.audio.pause()

这让我第一次意识到当你想要访问本机 API$refs时这可能会很有用。

我目前的做法比较 hack。正确的做法大概是这样的：

// Audio.vue
<template>
    <audio :src="src" ref="audio"></audio>
</template>

<script>
export default {
    props: ['playing'],
    watch: {
        playing(p) {
            if (p) this.$refs.audio.play();
            else this.$refs.audio.pause();
            // actually I will write: this.$refs.audio[p? 'play': 'pause']();
        },
    },
}
</script>

有了这个包装的音频组件，我们就不需要$refs在代码库中的任何其他地方使用了！$refs都是低级的东西，在我看来，我们应该总是把它包装起来以提升代码的抽象级别。

Vue 可以非常快速地更新 DOM

如果你点击进入该网站，你可能会注意到代码库的 Stars 数量会逐渐增加。此效果是由TransitioningNumber组件实现的。

此组件的工作方式是，每当 发生porps.number变化时，它都会计算动画frames。frames只是一个从上一个props.number到当前的数字列表props.number。由于我已将 设置FPS为 22，因此每帧对应的秒数为。要实现动画效果，我们只需将从第一帧到最后一帧的1 / 22更改，并在每帧之间设置 秒的超时时间即可。我很惊讶 Vue 能够如此出色地处理这个问题，而且结果看起来确实让我很满意。this.displayNumber1 / 22

我将举一个例子来说明上述实现。假设我们想在几秒内显示从0到 的过渡。为了达到 22 FPS，我们知道需要帧。因此，我们将构建一个列表，，其中包含 44 帧，范围从 0 到 1000。显然，每帧都有。然后我们构建列表。然后我们将每帧设置为 ，每帧之间的超时时间为秒。1000222 * 2 = 44framesstep = 1000 / 44 = 22.7272727 ~= 23frames = [0, 23, 46, 68, ..., 1000]this.displayNumber1 / 22

这种方法更像是一种实验，看起来确实很幼稚。如果您能提出更好的方法，我将不胜感激。请在下方评论！

Firestore 太棒了

在这个项目中，我使用了Firebase，如果你还没听说过，它本质上是一个后端即服务 (backend-as-a-service)，你无需关心服务器的架构。它让你可以专注于应用程序逻辑。

Firestore是 Firebase 开发的实时数据库。它拥有强大的 API，包括基本的 CRUD（创建、读取、更新、删除）操作、数据库更新订阅等等！您无需再自行设置 REST API，只需使用 Firestore 即可。您也无需再设置烦人的 WebSocket，只需使用 Firestore 即可！“太棒了！请帮我搞定一切！”

请参考这两个文件（1和2）。

// services/repoSnapshots.js (expanded)
import firebase from 'firebase';

export default {
    subscribe: (fn) => firebase.firestore()
      .collection('repo-snapshots')
      .orderBy("timestamp", "desc")
      .limit(20)
      .onSnapshot(snapshot => fn(snapshot.docs.map(d => d.data()))),
}

// App.vue (<script>)
import repoSnapshots from './services/repoSnapshots.js';

export default {
    ...
    data: () => ({
        snapshots: [],
    }),
    created() {
        repoSnapshots.subscribe(snapshots => this.snapshots = snapshots);
    },
    ...
}

如你所见，代码描述非常清晰易懂。虽然文档不是很完整，但还是花了些时间才找到我想要的方法。使用起来仍然非常简单。

Parcel 真的很棒

Vue-cli 3.0 真的太棒了。但我认为Parcel仍然是零配置打包工具的赢家。得益于强大的 Parcel，这个项目的启动过程非常轻松！我再也不用担心添加sass-loader/vue-loader或其他加载器了。它真的帮你搞定了！简直太神奇了！

无论如何，

希望您和我一样，为 Vue 超越 React 而感到兴奋，并享受阅读这篇文章的乐趣。如果您有任何问题，请随时提问，我一定会尽力解答。感谢您的阅读！