Comments (2)
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.
Wow, thank you for the well explained answer!
from vue-async-computed.
Related Issues (20)
- Typescript / vue-async-computed Property 'foo' does not exist on type 'CombinedVueInstance<Vue, {...} HOT 2
- Doesn't seem to deep watch properties. HOT 2
- Initial State of Async Call 'updating' set to true when using shouldUpdate()
- Vue 3 support? HOT 5
- Add support to installation as mixin.
- Make Promise as return of method update() or new method updatePromise()
- Provide option to exclude or explicitly list watched properties
- Value getting computed on route changes
- kjidjvtlcdgjj
- Use with Nuxt? HOT 1
- Provide cancel method
- implement set like get
- "this.$options is undefined" is being raised when using vue async computed
- "lazy: true" fails to stop updates HOT 1
- TypeScript support in 3.8.0 HOT 4
- Add vue-async-computed-decorator to README.md HOT 2
- Issue updating reactive variables in asyncComputed HOT 1
- asyncComputed return only default value HOT 2
- how to use this plugin with class based vue components? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-async-computed.