Git Product home page Git Product logo

Comments (2)

foxbenjaminfox avatar foxbenjaminfox commented on July 26, 2024

You're right that this is a slight difference in behavior. It is, however, necessary.

Let's take your example. Imagine we're writing a method like this:

methods: {
  testMethod () {
    const test = this.test2
    return someFunction(test)
  }
}

This works fine, whenever you call testMethod. Even if you call testMethod before the test2 computed value has been computed, Vue can be sure to computed the value in the moment, before continuing on the the second line of testMethod.

testMethod is a synchronous function. This means that while we can't stop in the middle of it's execution to get an asynchronous value. Javascript doesn't have a function to synchronously pause execution until a promise resolves, and for good reason.

But that said, sometimes what you want is to simulate that: to access a value that is calculated asynchronously from a synchronous context. But because you can't actually block the synchronous context to calculate an async value, the only way to do that is to calculate the async value up front (and to keep it updated as the dependencies change, of course.)

That's what vue-async-computed does. If you don't want that, there actually is an escape hatch: lazy: true. If you use the lazy option when defining your async computed property, vue-async-computed tries very hard to simulate what you want.

lazy works like this: the first time the property is accessed, its value is null (or the defined default). Only then is the function called and the value computed for the future.

This isn't exactly the same: specifically the part about the value being null for the first access, but it's about as close as you can get.

It's a reasonable question to ask whether lazy should be the default. As it stands it's not, but you could imagine it working that way. One reason why the default is lazy: false is that lazy is a latter addition: for backwards compatibility reasons it can't be switched on by default, even if you do think it makes a better default. Perhaps in the next major version it could be changed—but probably not. The value always being null on the first access is unintuitive enough that I'm leery of making it the default.

One way or another, it's always an option. If you'd like, just test3 this way:

asyncComputed: {
  test3: {
    get () {
      alert('test3')
    },
    lazy: true
  }
}

This should give you roughly the the behavior you're looking for, with the caveat I mentioned above about the initil value of test3 the first time it's accessed.

from vue-async-computed.

royduin avatar royduin commented on July 26, 2024

Wow, thank you for the well explained answer!

from vue-async-computed.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.