javascript - Vue.js 对象代理 : props not showing in Object. 键

Question

Vue.js 代理其对象以捕获属性访问。我似乎发现了抽象中的漏洞:Object.keys 没有返回键列表中的 props。

使用以下 Vue 组件:

function callMe() {
  var comp = Vue.component("comp", {
    template: "<button @click='clickMe()'>xxx</button>",
    props: {
        label: String,
        cardId: String,
        collapsible: {
            type: Boolean,
            default: true,
        },
        collapsed: Boolean,
    },
    data() {
        console.log(Object.keys(this))
        console.log(this.collapsible)
        console.log(Object.keys(this).includes("collapsible"))
        return { isCollapsed: this.collapsed }
    },
    methods: {
       clickMe(){
         console.log(this)
       } 
    }

  })
  var vm = new Vue({
    el: '#root',
    template: "<comp></comp>",
  })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
 
 <button @click="clickMe()" >Click Me</button>

</div>

控制台输出为:

(29) ["_uid", "_isVue", "$options", "_renderProxy", "_self", "$parent", "$root", "$children", "$refs", "_watcher", "_inactive", "_directInactive", "_isMounted", "_isDestroyed", "_isBeingDestroyed", "_events", "_hasHookEvent", "_vnode", "_staticTrees", "$vnode", "$slots", "$scopedSlots", "_c", "$createElement", "$attrs", "$listeners", "_watchers", "_props", "toggleThis"]
true
false

(有趣的是，当我稍后调用检查时，isCollapsed 项位于列表中。您还会注意到 clickMe 方法也存在。看起来仅保留 Prop 。)

为什么会发生这种情况？

更一般地说，Vue 的 Proxy 对象如何发出一组与它可以访问的不同的键？

这对我来说是一个问题，因为我正在尝试使用 pug-vdom 进行一些奇特的操作，并且内部使用 Object.keys 枚举要注入(inject)到 Pug 中的变量模板。

这是一个 Vue 错误吗？或者，是否可以从 this 对象访问 props 键列表，并导出其键也包含 props 的对象？

编辑:添加了一个可运行的代码片段来演示该问题。

Answer 1

Object.keys() 不会迭代原型(prototype)属性。
子组件也是从根组件继承的。这意味着 props 和 data 字段必须位于子组件的 __proto__ 内。

因此，如果我们执行 Object.keys(this__proto__).includes("collapsible") ，它会在子组件中返回 true 。

如果您想从子组件访问这些字段，请使用 this.$props 和 this.$data 。

function callMe() {
  var comp = Vue.component("comp", {
    template: "<button @click='clickMe()'>xxx</button>",
    props: {
        label: String,
        cardId: String,
        collapsible: {
            type: Boolean,
            default: true,
        },
        collapsed: Boolean,
    },
    data() {
        console.log('Inside Child:',Object.keys(this))
        console.log(this.collapsible)
        console.log(Object.keys(this.__proto__).includes("collapsible"))
        console.log(Object.keys(this).includes("collapsible"))
        return { isCollapsed: this.collapsed }
    },
    methods: {
       clickMe(){
         console.log(this)
       } 
    }

  })
  var vm = new Vue({
    el: '#root',
    template: "<comp></comp>",
    props:{
    jack:{
          type: Boolean,
          default: true
         }
    },
    data(){
      console.log('Inside parent:', this.jack)
      return {}
    }
  })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
 
 <button @click="clickMe()" >Click Me</button>

</div>