diff --git a/src/core/instance/state.js b/src/core/instance/state.js index 4fa6f15bac8..fe09c733c49 100644 --- a/src/core/instance/state.js +++ b/src/core/instance/state.js @@ -141,7 +141,16 @@ function initData (vm: Component) { `Use prop default value instead.`, vm ) - } else if (!isReserved(key)) { + } else if (isReserved(key)) { + if (process.env.NODE_ENV !== 'production') { + warn( + `Property "${key}" will not be proxied on the instance because it ` + + `may conflict with Vue's internal properties. You will have to access it as ` + + `"vm.$data.${key}". Avoid defining component properties that start with _ or $.`, + vm + ) + } + } else { proxy(vm, `_data`, key) } } diff --git a/test/unit/features/instance/properties.spec.js b/test/unit/features/instance/properties.spec.js index 02aca12fcfa..5225b76c537 100644 --- a/test/unit/features/instance/properties.spec.js +++ b/test/unit/features/instance/properties.spec.js @@ -200,4 +200,13 @@ describe('Instance properties', () => { vm.$listeners = {} expect(`$listeners is readonly`).toHaveBeenWarned() }) + + it('warn data properties that start with _ or $', () => { + new Vue({ + data: { $a: 'a', _b: 'b' }, + template: '
' + }).$mount() + expect(`Property "$a" will not be proxied on the instance`).toHaveBeenWarned() + expect(`Property "_b" will not be proxied on the instance`).toHaveBeenWarned() + }) })