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

I am migrating my vue 2 application into vue 3. While exploring composition api, i came to know about ref function in setup hook which is replacing data function of option api.

In vue 2:

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

I am not sure how to initialize it in ref function of setup hook. I have started learning vue 3.

CodePudding user response：

Try like following snippet:

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/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
  <li v-for="item in mapList" :key="item">
    {{ item }}
  </li>
</div>