如何在设置挂钩中使用 ref 声明新的 map() - vue 3

Question

我正在将我的 vue 2 应用程序迁移到 vue 3。在探索组合 api 时，我开始了解设置挂钩中的 ref 函数，它正在替换选项 api 的数据函数。

在 vue 2 中：

data() {
  return {
   cntmap: new Map()
  }
}

我不确定如何在 setup hook 的 ref 函数中初始化它。我开始学习 vue 3.

Answer 1

像下面的片段一样尝试：

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const mapList = ref(new Map())
    
    mapList.value.set('a', 1);
    mapList.value.set('b', 2);
    mapList.value.set('c', 3);

    return { mapList }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
  <li v-for="item in mapList" :key="item">
    {{ item }}
  </li>
</div>

如何在设置挂钩中使用 ref 声明新的 map() - vue 3

How to declare new map() by using ref in setup hook - vue 3

javascript

vue.js

vuejs3