Specifying the deep/immediate flags on watches is awkward
Opened this issue · 5 comments
Background
Currently, defining a watcher with either the deep
or immediate
flags requires a watch property with an object value that specifies the handler and flags. This is awkward and breaks type checking because this
isn't defined.
@VueStore
class Store {
prop = {value: 10}
'on:prop' = {
handler: function() {
this.prop // type error because `this` isn't defined
},
deep: true
}
}
That's in the Vue 2 branch. Due to the way the watches are created in the Vue 3 branch, setting those flags is impossible so your only option is to manually call watch
yourself.
Proposal
I propose a suffix syntax for setting these flags. The flags would be defined, comma-separated, after a pound sign. e.g. 'on:prop#deep'
or 'on:prop#deep,immediate'
.
In Vue 2 the only flags will be deep
and immediate
. Vue 3 adds the flush
watch option, which adds three more (mutually exclusive) flags: pre
, post
, and sync
.
I think it's a great idea.
What about just adding the flags without additional punctuation?
'on:foo.bar.baz deep immediate'
On top of (imo) reducing the chances of conflicts, I feel like the pound sign syntax is easier to read.
- The pound sign clearly separates and distinguishes between the property being watched and the flags.
- The property and flags aren't the same thing, so imo they shouldn't be put side by side like they're peers.
- A similar pound sign syntax is already used in URLs, so it'll be familiar to people.
- Personally it feels more "syntactic" to me. More concrete.
The pound and commas don't feel particularly idiomatic with respect to Vue.
Maybe something like this...
'on:foo.bar.baz'
'on.deep:foo.bar.baz'
'on.deep.immediate:foo.bar.baz'
Oh, yeah that would work. Similar to .prevent
/.sync
/etc.
Pretty much exactly like Vue's directive syntax!