watchEffect is introduced via Composition API in Vue 3 (and to Vue 2 via composition-api plugin), and offers the convenience of being able to use the callback function to automatically determine reactive dependencies.
watchEffect(() => console.log(count.value))
I'm wondering if it could be officially supported in Vue 2 & 3 without the Composition API.
(I'm not against the composition API, but seems like this could be a stepping stone to some of the new features in v3.)
Motivation
It's currently cumbersome to add a shared handler that reacts to multiple props. Especially knowing that Vue can detect reactive dependencies for you.
This can be solved with watchEffects in the composition API, but would be nice to use this feature without the composition API.
export default {
props: {
value: Number,
min: Number,
max: Number,
},
watch: {
value: 'validateProps',
min: 'validateProps',
max: 'validateProps',
},
methods: {
validateProps() {
assert(this.min < this.max, 'min must be smaller than max');
assert(this.min < this.value, 'value must be greater than min');
assert(this.max > this.value, 'value must be smaller than max');
}
}
}
API ideas
Support array in watch
By supporting an array to be passed into watch, functions can be passed in watchEffect style. The current object syntax for watch can still be passed in as an element of the array.
export default {
props: {
min: Number,
max: Number,
},
// Add support for passing in an array
watch: [
function () {
assert(this.min < this.max, 'min must be smaller than max');
},
// Current object-style watch for watching specific properties
{
max() {}
}
]
}
watchEffect property
A new watchEffect property can be added to the component API to take in watchEffect functions. In v3, there's both watch and watchEffect so it makes sense to keep this separation.
export default {
props: {
min: Number,
max: Number,
},
// new property
watchEffect: [
function () {
assert(this.min < this.max, 'min must be smaller than max');
},
]
}
{
watchEffect: [
// invoke immediately
{
immediate: true,
handler() {
assert(this.min < this.max, 'min must be smaller than max');
},
},
]
}
Alternatives
$watch() in v2
In v2, you can attain this behavior by passing in the function to expOrFn in $watch.
However, I think having a designated property adds much more structure and allows watches to be added declaratively.
Not to mention, I don't think this is is very known/common use-case of $watch. I think having an official API for it will make this feature more discoverable and easier to use.
export default {
props: {
min: Number,
max: Number,
},
created() {
this.$watch(() => {
assert(this.min < this.max, 'min must be smaller than max');
});
}
}
3rd-party plugin that adds support for the watchEffect property on components
I can put together a formal RFC if there's interest in this.
watchEffect
is introduced via Composition API in Vue 3 (and to Vue 2 via composition-api plugin), and offers the convenience of being able to use the callback function to automatically determine reactive dependencies.I'm wondering if it could be officially supported in Vue 2 & 3 without the Composition API.
(I'm not against the composition API, but seems like this could be a stepping stone to some of the new features in v3.)
Motivation
It's currently cumbersome to add a shared handler that reacts to multiple props. Especially knowing that Vue can detect reactive dependencies for you.
This can be solved with
watchEffects
in the composition API, but would be nice to use this feature without the composition API.API ideas
Support array in
watch
By supporting an array to be passed into
watch
, functions can be passed inwatchEffect
style. The current object syntax forwatch
can still be passed in as an element of the array.watchEffect
propertyA new
watchEffect
property can be added to the component API to take inwatchEffect
functions. In v3, there's bothwatch
andwatchEffect
so it makes sense to keep this separation.Alternatives
$watch()
in v2 In v2, you can attain this behavior by passing in the function toexpOrFn
in$watch
.However, I think having a designated property adds much more structure and allows watches to be added declaratively.
Not to mention, I don't think this is is very known/common use-case of
$watch
. I think having an official API for it will make this feature more discoverable and easier to use.3rd-party plugin that adds support for the
watchEffect
property on componentsI can put together a formal RFC if there's interest in this.