本文共 10999 字,大约阅读时间需要 36 分钟。
vue watchers
Infinite Scroll is a UX pattern that suggests showing users few contents on page or app load. More contents are then loaded once the user starts scrolling down the page. These contents are loaded asynchrounously by making request to the server responsible for providing the content. In this post I’m going to talk about asynchronous operations in JavaScript, as well as how Vue ‒ an awesome JavaScript framework, can be used in this context. In the process, we will see a simple page that uses infinite scroll.
无限滚动是一种UX模式,建议向用户显示页面或应用程序加载时很少的内容。 一旦用户开始向下滚动页面,便会加载更多内容。 通过向负责提供内容的服务器发出请求,可以随意加载这些内容。 在本文中,我将讨论JavaScript中的异步操作,以及如何在这种情况下使用Vue ‒一个很棒JavaScript框架。 在此过程中,我们将看到一个使用无限滚动的简单页面。
In programs written synchronously, here’s the deal ‒ you’ve got two lines of codes, L1 and L2. L2 cannot execute until L1 has finished running. check out the most basic example of a synchronous written program below:
在同步编写的程序中,这是交易‒您有两行代码L1和L2。 在L1完成运行之前,L2无法执行。 在下面查看同步编写程序的最基本示例:
console.log("quavo"); console.log("takeoff"); console.log("offset"); //Console logs > quavo > takeoff > offset
The problem with writing code this way is that it makes your app's UX rigid and awkward. Let's say you visit a shopping website, say , if you're not running an ad blocker chances are you'll be flooded with ads. If Amazon was running on synchronously written code, your page would freeze up repeatedly while all of the images loaded for the pages and ads and you wouldn't be able to click on anything until after the page has finished loading. If the page loaded a lot in the background it could take a while before you could interact with the page which would be very inconvenient.
用这种方式编写代码的问题是,它会使您的应用的用户体验变得僵硬而笨拙。 假设您访问购物网站,例如 ,如果您没有运行广告拦截器,那么您很可能会被广告充斥。 如果Amazon使用同步编写的代码运行,则在页面和广告加载的所有图像加载期间,您的页面将反复冻结,并且只有在页面完成加载后,您才能单击任何内容。 如果该页面在后台加载了很多内容,则可能需要一段时间才能与该页面进行交互,这非常不便。
Enter asynchronous programs, they offer us a much better deal I think. You’ve got two lines of code, L1 and L2, where L1 schedules some task to be run in the future but L2 runs before that task completes. Check out this basic demo of writing asynchronous code:
输入异步程序,它们为我们提供了更好的协议。 您有两行代码,L1和L2,其中L1安排了一些将来要运行的任务,而L2在该任务完成之前运行。 查看这个编写异步代码的基本演示:
console.log "quavo" $http.get("our_url", (data) => console.log "takeoff") console.log "offset" // Console logs > quavo > offset > takeoff
Normally we would see the code above executed in the order in which it was written but because the $http.get
request above will take some time to get data
from our_url
, JavaScript won’t wait for that, instead it goes ahead and executes the next line of code while waiting for $http.get
to finish what it is doing thus the arrangement of logging in the console. Other ways of writing code asynchronously include:
通常,我们会看到上面的代码按其编写顺序执行,但是由于上面的$http.get
请求将需要一些时间才能从our_url
获取data
, our_url
JavaScript不会等待,而是继续执行该代码。等待$http.get
完成其工作的下一行代码,从而安排在控制台中进行登录的方式。 其他异步编写代码的方法包括:
setTimeout
functions which schedule something to happen in the future and then go ahead to execute the next block of code: setTimeout
函数可安排将来发生的事情,然后继续执行下一个代码块: console.log("Can I take your order?"); setTimeout(function() { console.log("Yes please!"); }, 2000); console.log("Sure, one second please"); // Console logs > Can I take your order? > Sure, one second please > Yes please!
function Y(X) { $.get("our_url", X); }
Callback functions exist in different modes, chances are you’ve used them without knowing. Examples include window.onclick
, setTimeout
and setInterval
.
回调函数以不同的模式存在,很可能您在不知不觉中使用了它们。 示例包括window.onclick
, setTimeout
和setInterval
。
Vue watchers allow us to perform asynchronous operations in response to changing data. They’re like a more general way to react to data changes in your Vue instance. In our Vue Instance, watchers are denoted with the watch
keyword and are used thus:
Vue观察者使我们能够响应更改的数据执行异步操作。 它们就像是对Vue实例中的数据更改做出React的更通用的方式。 在我们的Vue实例中,观察者用watch
关键字表示,因此可以这样使用:
new Vue({ el: '#app', data: { // data we intend to bind to our view }, watch: { // asynchronous operations that we'll be working with in our app } });
Let’s see how Vue uses watchers to monitor asynchronous operations. Using Vue, we’ll build an app with an infinite scroll feature, once a user gets to the bottom of the page, a GET
request is performed and more data is retrieved. Let me just chip in here that this article works through 's original pen. I'm a big fan. Let’s get to work:
让我们看看Vue如何使用观察程序来监视异步操作。 使用Vue,我们将构建具有无限滚动功能的应用程序,一旦用户到达页面底部,便会执行GET
请求并检索更多数据。 让我在这里说一下,这篇文章是通过的原始笔来完成的。 我是大粉丝。 让我们开始工作:
new Vue({ // The el property points to the DOM using a query selector el: '#app', });
data
function and append any data that should be bound to the DOM. Initially, we won’t be at the bottom of the page thus the bottom
boolean property is set to false. Whatever results our API fetches will be stored in the beers
property, which is an empty array. 创建data
功能,并附加应绑定到DOM的所有数据。 最初,我们不会在页面底部,因此, bottom
boolean属性设置为false。 无论我们提取的API结果如何,都将存储在beers
属性中,该属性为空数组。 data() { return { bottom: false, beers: [] } }
methods
member. Methods allow us create functions and bind events to these functions as well as handle these events. In the bottomVisible()
function, we use three read-only properties to manually create our infinite scroll feature: 使用methods
成员定义我们的methods
。 方法使我们可以创建函数并将事件绑定到这些函数以及处理这些事件。 在bottomVisible()
函数中,我们使用三个只读属性来手动创建无限滚动功能: scrollY
: Returns the Y coordinate of the top edge of the current viewport. If there is no viewport, the returned value is zero. scrollY
:返回当前视口顶部边缘的Y坐标。 如果没有视口,则返回值为零。 clientHeight
: The inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin. clientHeight
:元素的内部高度(以像素为单位),包括填充,但不包括水平滚动条的高度,边框或边距。 scrollHeight
: The height of an element's content, including content not visible on the screen due to overflow. scrollHeight
:元素内容的高度,包括由于溢出而在屏幕上不可见的内容。 In the addBeer()
function, we perform a GET request using Axios. Using promises and callbacks, we create an object apiInfo
and pass in the values retrieved from our API call. Every function in our Vue Instance can access data properties using this
.
在addBeer()
函数中,我们使用Axios执行GET请求。 使用承诺和回调,我们创建一个对象apiInfo
并传递从我们的API调用中检索的值。 Vue实例中的每个函数都可以使用this
访问数据属性。
methods: { bottomVisible() { const scrollY = window.scrollY const visible = document.documentElement.clientHeight const pageHeight = document.documentElement.scrollHeight const bottomOfPage = visible + scrollY >= pageHeight return bottomOfPage || pageHeight < visible }, addBeer() { axios.get('https://api.punkapi.com/v2/beers/random') .then(response => { let api = response.data[0]; let apiInfo = { name: api.name, desc: api.description, img: api.image_url, tips: api.brewers_tips, tagline: api.tagline, food: api.food_pairing }; this.beers.push(apiInfo) if (this.bottomVisible()) { this.addBeer() } }) } }
watch
option watches for changes to the state of the app and updates the DOM accordingly: watch
选项watch
应用程序状态的更改并相应地更新DOM: watch: { bottom(bottom) { if (bottom) { this.addBeer() } } }
created
lifecycle hook to add a scroll event that fires each time the bottomVisible()
function is called. To implement our infinite scroll feature, we equate the bottom
boolean property in the data
function to the bottomVisible()
function. created
hooks allow us access reactive data as well as functions in our Vue instance. 我们使用created
生命周期挂钩添加一个滚动事件,该事件在每次调用bottomVisible()
函数时触发。 为了实现无限滚动功能,我们将data
函数中的bottom
布尔属性等同于bottomVisible()
函数。 created
钩子使我们可以访问响应数据以及Vue实例中的函数。 created() { window.addEventListener('scroll', () => { this.bottom = this.bottomVisible() }) this.addBeer() }
Move over to the DOM, where the following Vue directives will be used to provide two way binding between the DOM and the Vue instance:
移至DOM,以下Vue指令将用于在DOM和Vue实例之间提供两种方式的绑定:
v-if
: For conditionally rendering statements on the DOM
v-if
:用于在DOM上有条件地呈现语句
v-for
: For rendering a list of items based on an array, requires a special syntax in the form of beer in beers
, where beers
is the source data array and beer
is an alias for the array element being iterated on.
v-for
:要基于数组呈现项目列表,需要使用beer in beers
的beer in beers
形式的特殊语法,其中beers
是源数据数组,而beer
是要迭代的数组元素的别名 。
v-if
: For conditionally rendering statements on the DOM
v-if
:用于在DOM上有条件地呈现语句
v-for
: For rendering a list of items based on an array, requires a special syntax in the form of beer in beers
, where beers
is the source data array and beer
is an alias for the array element being iterated on.
v-for
:要基于数组呈现项目列表,需要使用beer in beers
的beer in beers
形式的特殊语法,其中beers
是源数据数组,而beer
是要迭代的数组元素的别名 。
Make yourself some Punk Beers
Loading...{ { beer.name }}
{
{ beer.tagline }}Description: {
{ beer.desc }}Tips: {
{ beer.tips }}Food Pairings
- { { item }}
by
One might ask “Why don’t we just use computed properties for this?”, the reason is that computed properties are synchronous and must return a value. When carrying out asynchronous operations such as timeout functions, or like our demo above, GET requests, it’s best to use watchers because Vue listens for the return value of the function. It’s also cool to use event listeners but these have the disadvantage of manually handling the event and calling a method instead of just listening to data changes. In any case, you now know how to handle asynchronous operations when you see or want to use them in Vue.
有人可能会问“为什么不为此使用计算属性?”,原因是计算属性是同步的,必须返回一个值。 当执行诸如超时功能之类的异步操作时,或者像上面的演示一样,执行GET请求时,最好使用观察程序,因为Vue会监听该函数的返回值。 使用事件侦听器也很酷,但是它们具有手动处理事件并调用方法而不是仅侦听数据更改的缺点。 无论如何,您现在都知道在Vue中看到或想要使用异步操作时如何处理它们。
翻译自:
vue watchers
转载地址:http://feuwd.baihongyu.com/