Specifying the deep/immediate flags on watches is awkward

[thecodewarrior]

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.

[davestewart]

I think it's a great idea.

What about just adding the flags without additional punctuation?

'on:foo.bar.baz deep immediate'

[thecodewarrior]

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.

[davestewart]

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'

[thecodewarrior]

Oh, yeah that would work. Similar to .prevent/.sync/etc.

[davestewart]

Pretty much exactly like Vue's directive syntax!