feat(warn): warn when an existing property starting with $ is not properly accessed

Closes vuejs#8213

Author: posva

src/core/instance/proxy.js

@@ -24,6 +24,16 @@ if (process.env.NODE_ENV !== 'production') {
     )
   }
 
+  const warnStartingWithDollar = (target, key) => {
+    warn(
+      `Property "${key}" must be accessed with "$data.${key}" because ` +
+      'properties starting with "$" or "_" are not proxied in the Vue instance to ' +
+      'prevent conflicts with Vue internals' +
+      'See: https://vuejs.org/v2/api/#data',
+      target
+    )
+  }
+
   const hasProxy =
     typeof Proxy !== 'undefined' && isNative(Proxy)
 
@@ -47,7 +57,8 @@ if (process.env.NODE_ENV !== 'production') {
       const has = key in target
       const isAllowed = allowedGlobals(key) || (typeof key === 'string' && key.charAt(0) === '_')
       if (!has && !isAllowed) {
-        warnNonPresent(target, key)
+        if (key in target.$data) warnStartingWithDollar(target, key)
+        else warnNonPresent(target, key)
       }
       return has || !isAllowed
     }
@@ -56,7 +67,8 @@ if (process.env.NODE_ENV !== 'production') {
   const getHandler = {
     get (target, key) {
       if (typeof key === 'string' && !(key in target)) {
-        warnNonPresent(target, key)
+        if (key in target.$data) warnStartingWithDollar(target, key)
+        else warnNonPresent(target, key)
       }
       return target[key]
     }

test/unit/features/instance/render-proxy.spec.js

@@ -45,5 +45,42 @@ if (typeof Proxy !== 'undefined') {
 
       expect(vm.$el.textContent).toBe('foo')
     })
+
+    it('should warn properties starting with $ when found', () => {
+      new Vue({
+        data: { $a: 'foo' },
+        template: `<div>{{ $a }}</div>`
+      }).$mount()
+      expect(`Property "$a" must be accessed with "$data.$a"`).toHaveBeenWarned()
+    })
+
+    it('should warn properties starting with $ when not found', () => {
+      new Vue({
+        template: `<div>{{ $a }}</div>`
+      }).$mount()
+      expect(`Property or method "$a" is not defined`).toHaveBeenWarned()
+      expect(`Property "$a" must be accessed with "$data.$a"`).not.toHaveBeenWarned()
+    })
+
+    it('should warn properties starting with $ when not found (with stripped)', () => {
+      const render = function (h) {
+        return h('p', this.$a)
+      }
+      render._withStripped = true
+      new Vue({
+        data: { $a: 'foo' },
+        render
+      }).$mount()
+      expect(`Property "$a" must be accessed with "$data.$a"`).toHaveBeenWarned()
+    })
+
+    it('should not warn properties starting with $ when using $data to access', () => {
+      new Vue({
+        data: { $a: 'foo' },
+        template: `<div>{{ $data.$a }}</div>`
+      }).$mount()
+      expect(`Property or method "$a" is not defined`).not.toHaveBeenWarned()
+      expect(`Property or method "$a" is not defined`).not.toHaveBeenWarned()
+    })
   })
 }