Subscribe on changes!

hasOwnProperty('anyprop') gives false on build only

avatar
Nov 28th 2022

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.

avatar
Jun 8th 2023

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')
     }
   }