hasOwnProperty('anyprop') gives false on build only
Vue version
3.2.45
Link to minimal reproduction
https://kasheftin.github.io/vue3-has-own-property-undefined/
Steps to reproduce
Just open the page
It shows Object.prototype.hasOwnProperty.call(this, 'prop1') = false
What is expected?
It should show Object.prototype.hasOwnProperty.call(this, 'prop1') = true
What is actually happening?
Here's the source code: https://github.com/Kasheftin/vue3-has-own-property-undefined/blob/master/src/PropTest1.vue This part causes the error:
export default {
...
props: {
prop1: {
type: Number,
default: 0
}
},
computed: {
prop1Exists() {
return Object.prototype.hasOwnProperty.call(this, 'prop1')
}
}
}
This code works just fine during the development. Since there's prop1
prop, this.prop1
is defined, and Object.prototype.hasOwnProperty(this, 'prop1')
gives true.
But for some reason the build gives the different result. You can check it on https://kasheftin.github.io/vue3-has-own-property-undefined/. And this is very concerning, because it works on dev, and does not work on prod, and you find that it does not work only on production deployment.
System Info
System:
OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
Memory: 14.76 GB / 31.32 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.5 - ~/.yarn/bin/yarn
npm: 8.5.5 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: 105.0.5195.125
Firefox: 107.0
npmPackages:
vue: ^3.2.45 => 3.2.45
Any additional comments?
It would be nice to know the way to check if a propery exists that works on dev and on build. I'm interested in options-api way.
I do not recognize this is a bug. Caused by being in dev
mode, vue exposes some attributes on the component instance proxy object (e.g: props, setupState). This is done to make it easier for developers to check. But in prod
mode, these properties are not exposed.
I think a better way is to check $props
wdyt ? @edison1105
computed: {
prop1Exists() {
return Object.prototype.hasOwnProperty.call(this.$props, 'prop1')
}
}