Warn when a data property name starts with $ or _

[ywwhack]

Version

2.5.3

Reproduction link

http://jsfiddle.net/p48cLbe3/3/

Steps to reproduce

new Vue({
  el: '#app',
  data: {
    // invalid, not proxy by vm
    $a: 'a'
  },
  computed: {
    // valid
    $b() {
      return 'b'
    }
  },
  methods: {
    // valid
    $c() {
      console.log('c')
    }
  }
})

What is expected?

Property name starts with $ or _ identifier should all valid or invalid whether defined in data/computed/methods option, i think these options's behaviors should be consistent

What is actually happening?

It's valid to define $xxx property in computed/methods option, but fall to define $xxx in data option

[posva]

Just in case, there's more information at https://vuejs.org/v2/api/#data, and it's both, for $ and _

As stated at #5879 (comment), we're open on PRs for warnings. Here's a similar commit that implemented warning for conflicting methods that started with _

Related: #6312

[rpemberton]

@posva is the new title correct? Do you only want to warn for computed properties? I would have thought the warning would be for data + computed + methods. Or just for data.

Happy to help with this but just need to be sure what needs doing :)

[posva]

On second thought, I'm not sure we should introduce this warning as it would show warnings for many plugins dev/users as they purposely use the $ to mark internals like vuelidate ($v). we could, however, do something similar to the commit I referenced for computed properties.

@chrisvfritz already proposed to add the warning functionality under another config flag to not flood existing plugins using $ (#6312 (comment))

Maybe we could go the other way around, adding an error for conflicting data properties and proxying them as well

[rpemberton]

I think main issue from the example above is that when a data property begins with $ or _ the warning says that the data property is not defined, which could be confusing.

How about if a data property begins with $ or _ then a console warning is shown which is along the lines of what the docs say:

Properties that start with _ or $ will not be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods. You will have to access them as vm.$data._property.

[posva]

@rpemberton That's perfectly fine as we're not breaking anything, feel free to do the PR and thank you 🙂

[coolzjy]

@posva
I was a little bit confused by the private property names rule in vue style guide, for a $ or _ prefixed property in data makes no sense. should we rework this rule to provide a better way to define private properties?

[jungleBadger]

I've been reading this issue in order to understand what I could do to help and if there was nobody working on it already but seems that it is invalided by now and feature can not be implemented without breaking other things, right? Can you guys update this issue and remove the contribution tag?

[posva]

let's close this for the moment, thanks for the reminder 🙂