Optimizing Views
Doura has taken a very different way to do reactivity. Fortunately, We won't need to be aware of this most of time, excepting one case.
Considering the following example:
const user = defineModel({
state: {
count: 0,
user: {
name: 'alice',
age: 18,
},
},
views: {
userName() {
return this.user.name
},
},
})
Ideally, the userName
view should only re-evalute when user.name
is changed.
But that's not how Doura works. Internally, userName
will track the update of both user
and user.name
. When user.age
has changed, it will also trigger a change event of user
. So userName
view has to invalidate itself and re-evalute even only user.age
is changed.
For the sake of performance, we need to explicitly mark out the user
from the reactivity tracking system. Here is how you can do this:
const user = defineModel({
state: {
count: 0,
user: {
name: 'alice',
age: 18,
},
},
views: {
userName() {
const user = this.$isolate((state) => state.user)
return user.name
},
},
})
$isolate()
will executes the given function in a scope where reactive values can be read, but they cannot cause the reactive scope of the caller to be re-evaluated when they change.