vue watch 修改滚动条_利用Vue Watchers制作出简单的异步无限滚动

原标题：利用Vue Watchers制作出简单的异步无限滚动

什么是watch？

Vue的watch允许我们执行异步操作以响应数据更改。它就像对Vue实例中的数据更改做出反应的更一般的方式一样。具体的用法可以直接看下面的示例，简单直接。

使用watch扩展异步操作

让我们看看Vue如何使用watch来监视异步操作。我们使用vue构建一个具有无限滚动功能的应用程序，用户浏览到达页面底部，将会执行GET请求并获取更多数据。下面就让我带大家实现这个简单的功能吧！

首先我们使用Java脚本标记通过DOM导入必要的Vue和Axios。

创建一个新的Vue实例：

创建data函数，通过data函数将数据绑定到DOM上。我们还需要设置一个bottom属性用来判断页面是否到达底部，所以我们先把bottom布尔值属性设置为false。之后我们通过API请求回来的数据存储在beers属性。

通过methods方法来使用我们自定义方法。methods允许我们创建函数并将事件绑定到这些函数以及处理这些事件。在bottomVisible()函数中，我们使用三个只读属性来手动创建我们的无限滚动功能：

1.scrollY：返回当前viewport顶部边缘的Y坐标，如果没有viewport，返回的值为0。

2.clientHeight：以像素为单位的元素的内部高度，包括填充，但不包括水平滚动条高度，边框或边距。

3.scrollHeight：元素内容的高度，包括由于溢出在屏幕上不可见的内容。

在addBeer()函数中，我们使用Axios执行GET请求。使用promises和callbacks，我们创建一个对象apiInfo并传入从我们的API调用检索到的值。我们的Vue实例中的每个函数都可以使用this来访问数据属性。

watch选项监视应用程序状态的变化并相应地更新DOM：

我们使用created的生命周期钩子添加每次调用bottomVisible()函数时触发的滚动事件。为了实现我们需要的无限滚动功能，我们将data函数中的bottom布尔属性等同于bottomVisible()函数。created的钩子允许我们访问反应数据以及Vue实例中的函数。

移到DOM，其中将使用以下Vue指令来提供DOM和Vue实例之间的双向绑定：

1.v-if：用于在DOM上有条件地呈现指令

2.v-for：为了渲染一个基于数组的items列表，需要一个beer in beers形式的语法，beers是源数据数组，beer是数组元素迭代的别名。

之后就大功告成！！！

总结

有人可能会问“为什么我们不使用计算的属性？”，原因是计算属性是同步的，必须返回一个值。在执行异步操作(如超时函数)时，或者像我们上面演示的GET请求那样，最好使用watch，因为Vue监听函数的返回值。使用事件监听器也很酷，但是这些方法有手动处理事件和调用方法的缺点，而不是只是监听数据的变化。在任何情况下，您现在都知道如何在Vue中看到或想要使用它们时处理异步操作。返回搜狐，查看更多

责任编辑：