Vuejs 3 道具是代理

Question

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

<template>
  <div class="custom-select-container">
    <div class="selected-item" @click="openSelect">
      <span class="selected-items-text">{{ selectedItem.name }}</span>
      <span class="icon-arrow1_b selected-items-icon" :class="{ active: showOptions }" />
    </div>
    <transition name="fade">
      <ul v-show="options.length && showOptions" class="custom-select-options">
        <li v-for="(option, index) in options" :key="index" class="custom-select-item">{{ option.name }}</li>
      </ul>
    </transition>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },

  setup(props) { 
    let showOptions = ref(false);
    let selectedItem = ref(props.options[0])

    const openSelect = () => {
      showOptions.value = !showOptions.value
    }

    onMounted(() => {
      console.log('test', props.options)
    })

    return { 
      openSelect,
      showOptions,
      selectedItem
    }
  }
}
</script>

我传递数据的父组件：

<template>
  <div class="page-container">
    <div>
      <div class="items-title">
        <h3>List of categories</h3>
        <span>({{ allCategories.length }})</span>
      </div>
      <div class="items-container">
        <div class="item" v-for="(category, index) in allCategories" :key="index">
          <span class="item-cell size-xs">{{ index + 1 }}.</span>
          <span class="item-cell size-l">{{ category.name }}</span>
        </div>
      </div>
    </div>
    <custom-select
      :options="allCategories"
    />
  </div>
  
</template>

<script>
import CustomSelect from '../components/Input/CustomSelect'
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  components: {
    CustomSelect
  },

  computed: {
  
  },

  setup() {
    const store = useStore()

    const allCategories = computed(() => store.getters['categories/getAllCategories'])

    return {
      allCategories
    }
  }
}
</script>

Answer 1

这就是reactivity 在 Vue3 中的工作方式。

使用

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

或

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

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