Vue应用程序中无限滚动的交点观察器

无限滚动是一种在现代Web和移动应用程序中应用的独特技术，仅在满足某些条件时才从服务器获取和显示数据。由于您仅在页面加载时为用户提供一些内容，然后在用户向下滚动页面时获取更多内容，因此可以大大提高应用程序的性能，从而使应用程序快速运行。

但是，在构建前端应用程序时，它似乎是最可怕的功能之一。首先，实现起来并非易事，因为这将要求开发人员控制应用程序的滚动事件，行为和属性。更重要的是，它往往会严重影响性能。

在这种情况下，许多开发人员会向现有库寻求帮助，但是从性能角度来看，它们通常不是最佳选择。为什么？他们使用主线程来管理经常调用的滚动事件。

内置的Intersection Observer API是更有效，更简单的替代方法。它为我们提供了一种异步观察目标元素与祖先元素或顶级文档的视口相交的变化的方法。更重要的是，它为我们提供了一个回调函数，该函数将在我们观察的元素进入视口时触发。如果这还没有意义，我保证会的，我们将在短期内详细讨论。

在本文中，我将讨论相交和观察过程以及它们与阈值和浏览器视口的关系。在此过程中，我们将使用无限的滚动页面构建一个简单的Vue应用程序，同时使用Intersection观察器获取数据。因此，让我们开始吧！

交叉口和观察过程

在这种情况下，相交仅是单词的含义。这是两个物体相遇的点。在这种情况下，就是当根对象等待目标对象进入根，然后调用回调。

页面是根对象，传入的div-as-target矩形是目标对象。根就像猎人在等待猎物一样观察目标，当目标进入根中时，它会触发回调函数。在右图中，另一个元素div-as-root可以是根。它执行的功能与左图中的页面完全相同。

创建路口观察员

要创建一个Intersection观察器，我们只需要两件事：一个options对象，该对象可让您控制在何种情况下调用观察者的回调，以及在查看目标时触发的回调函数。就是这样：

const options = {
  root: null, /* uses the page as root */
  threshold: 0
};
const observer = new IntersectionObserver(callback, options);

选项对象有两个主要字段，根和阈值。

ROOT

用作检查目标可见性的视口的元素必须是目标的祖先。如果未指定或，则默认为浏览器视口null。如果要选择特定元素作为根，请按以下步骤操作：

const options = {
  root: document.querySelector('#divAsRoot'), /* uses the Div element as root */
};

threshold

该阈值指示应在目标可见性的百分比上执行观察者的回调。

您可能希望观察者仅在目标进入视图的一半时（50％），完全进入视图（100％）或目标进入视图的第二秒（0％）才执行回调。阈值是您如何决定的。默认值为0，表示观察者即使在观看一个像素时也将执行回调。值1.0表示在每个像素都可见之前，回调不会运行。0.5也一样。仅当目标距离目标一半时才会触发回调。

Observing the target

创建观察者后，我们需要将观察对象传递给它。目标可以是带有标识符的任何元素。

const target = document.querySelector('#divAsTarget');
observer.observe(target);

了解了相交和观测如何工作后，让我们充分利用这些知识，并将其实现在Vue应用程序中。

What should we build?

让我们建立一个页面，从Random Users API获取随机用户。当我们向下滚动查看用户的页面时，它获取了更多的用户，因此滚动页面无限。我们将使用Intersection观察器确定用户何时向下滚动到页面底部（可以查看目标），并在回调函数中获取更多用户。

创建一个Vue项目

创建一个Vue项目，并将Axios安装为进行API调用的依赖项。更好的是，如果您安装了Vue CLI工具，请运行以下命令。

vue create scrolling-demo
cd scrolling-demo
npm install --save axios
npm run serve

创建项目后，我们要做的第一件事是获取初始用户并将其显示在页面上。如前所述，我们将从Random User API中获取用户。这是一个用于生成随机用户的API，其中包含用户名，图像，位置等详细信息。在我们的用例中，我们仅对用户的图像和名称感兴趣。

<!-- src/App.vue --> 
    <script>import axios from "axios";export default {
  name: "app",
  data() {
    return {
      users: [],
    };
  },
  methods: {
    fetchUsers() {
      for (var i = 0; i < 5; i++) {
        axios.get(`https://randomuser.me/api/`).then(response => {
          this.users.push(response.data.results[0]);
          console.log(response)
        });
      }
    },
    beforeMount() {
      this.fetchUsers();
    }
  }}</script>

fetchUsers()-使用Axios从随机用户API中提取五个初始用户。然后data()使用获取的用户更新我们在函数中定义的users数组。

beforeMount()-调用fetchUsers()函数。

如果打开浏览器控制台，应该看到记录了五个用户的阵列。如果您想知道为什么我们必须进行五个调用，那是因为随机用户API一次仅返回一个随机用户。因此，为了获得五个初始用户，我们不得不打了五个电话。让我们用获取的用户更新用户界面。我们只需要使用以下代码更新模板部分： 

<!-- src/App.vue --> <template>
  <div id="app">
    <div class="user" :key="user.id.value" v-for="user in users">
      <div>
        <img class="img" :src="user.picture.large">
      </div>
      <div>
        <p>{{ user.name.first }} {{ user.name.last }}</p>
        <ul></ul>
      </div>
    </div>
    <div>
      <span ref="target"/>
    </div>
  </div>
</template>

在这里，我们使用v-for指令根据users数组呈现用户列表。如果保存并运行该应用程序，我们现在应该在浏览器上看到最初的五个用户。

我添加了一些自定义样式以获取上面的视觉输出，因此，如果您的外观与我的不完全相同，这不是问题。

您可能已经注意到，当我们到达页面底部时，什么也没发生？，那是因为我们只加载了五个用户，仅此而已。现在，让我们添加交叉口观察器。

要创建观察者，我们定义options对象并将该观察者在data() 函数中设置为null。

<!-- src/App.vue --> 
    const options = {
  root: null,
  threshold: 0};export default {
  data() {
    return {
      users: [],
      observer: null
    };
  }}

然后，我们需要创建一个mounted()生命周期方法并在其中定义我们的观察者。

mounted() {
    this.observer = new IntersectionObserver(this.callback, options);
}

在这一点上，我们可能应该给观察者一个观察对象。因此，我们将div在初始用户列表下方创建一个元素，以便当我们滚动到页面上所有现有用户并到达该目标div元素时，将触发回调函数。使用新元素更新模板部分。

<div ref="divAsTarget"><h3>Loading ... </h3></div> /* below the user's list */

现在我们有了目标，让我们给观察者一些要观察的东西。

mounted() {
this.observer = new IntersectionObserver(this.callback, options);
this.observer.observe(this.$refs.divAsTarget);
}

在上面创建观察器时，我们传入了回调函数作为第一个参数，让我们在components methods对象中定义该函数。

callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
       this.fetchUsers();
    }
  });
}

当回调函数触发时，我们调用该fetchUsers()函数以将另外五个用户添加到我们的users数组中，这将更新具有更多用户的列表。这样，每次我们滚动到页面底部时，都会看到目标元素，并且观察者将触发回调，然后该回调将使用更多用户更新随机用户列表。让我们再次检查该应用程序。

因此，使用Intersection观察器进行无限滚动。

总结

我们已经了解了交叉口和观察的基础知识。我想相信我们已经了解了它如何帮助我们根据此独特功能来构建更好的应用程序。如果是这样，请继续构建一些有趣的东西。我也会喜欢提这个帖子的灵感来自于这个早期的岗位写的Codebeast中产生反应路口观察员。如果您对如何在React中执行此操作感到好奇，则应该检查一下。