Executed without being called, normal computed works different

[royduin]

asyncComputed: {
    test1: function () {
        alert('test1')
    }
},

computed: {
    test2: function () {
        alert('test2')
    }
}

When I put this in a component without calling any of these properties I'm getting a test1 alert. Why is a async computed property executed without being called and a normal computed property not?

[foxbenjaminfox]

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.

[royduin]

Wow, thank you for the well explained answer!