Vuejs 3 props 是 Proxy

Question

我将数组作为道具传递给另一个组件，当我想在该组件中安装时读取此内容时，我得到了 Proxy {}。如何从这个道具中读取数据？您可以在示例中看到，当我想要控制台 log prop 时，结果是 Proxy\xc2\xa0{}。我可以看到 HTML 结构中的所有值，但不能在安装的控制台中看到。

\n

\r\n

\r\n

<template>\n  <div class="custom-select-container">\n    <div class="selected-item" @click="openSelect">\n      <span class="selected-items-text">{{ selectedItem.name }}</span>\n      <span class="icon-arrow1_b selected-items-icon" :class="{ active: showOptions }" />\n    </div>\n    <transition name="fade">\n      <ul v-show="options.length && showOptions" class="custom-select-options">\n        <li v-for="(option, index) in options" :key="index" class="custom-select-item">{{ option.name }}</li>\n      </ul>\n    </transition>\n  </div>\n</template>\n\n<script>\nimport { ref, onMounted } from \'vue\'\n\nexport default {\n  props: {\n    options: {\n      type: Array,\n      default: () => []\n    }\n  },\n\n  setup(props) { \n    let showOptions = ref(false);\n    let selectedItem = ref(props.options[0])\n\n    const openSelect = () => {\n      showOptions.value = !showOptions.value\n    }\n\n    onMounted(() => {\n      console.log(\'test\', props.options)\n    })\n\n    return { \n      openSelect,\n      showOptions,\n      selectedItem\n    }\n  }\n}\n</script>

\r\n

\r\n

\r\n

\n

我传递数据的父组件：

\n

\r\n

\r\n

<template>\n  <div class="page-container">\n    <div>\n      <div class="items-title">\n        <h3>List of categories</h3>\n        <span>({{ allCategories.length }})</span>\n      </div>\n      <div class="items-container">\n        <div class="item" v-for="(category, index) in allCategories" :key="index">\n          <span class="item-cell size-xs">{{ index + 1 }}.</span>\n          <span class="item-cell size-l">{{ category.name }}</span>\n        </div>\n      </div>\n    </div>\n    <custom-select\n      :options="allCategories"\n    />\n  </div>\n  \n</template>\n\n<script>\nimport CustomSelect from \'../components/Input/CustomSelect\'\nimport { computed } from \'vue\'\nimport { useStore } from \'vuex\'\n\nexport default {\n  components: {\n    CustomSelect\n  },\n\n  computed: {\n  \n  },\n\n  setup() {\n    const store = useStore()\n\n    const allCategories = computed(() => store.getters[\'categories/getAllCategories\'])\n\n    return {\n      allCategories\n    }\n  }\n}\n</script>

\r\n

\r\n

\r\n

\n

Answer 1

这就是Vue3 中反应性的工作原理。

使用

console.log(JSON.parse(JSON.stringify(data))

或者

console.log(JSON.stringify(data, null, 2))

在控制台中显示代理的内容