Composition-api: Unable to render data？

[xieyezi]

this is my setup():

  setup() {
    const dataList = reactive([]);
    function getList() {
      axios.get("https://www.mxnzp.com/api/music/recommend/list").then(res => {
          dataList.value = res.data.data;
          console.log(dataList.value);
        })
        .catch(err => {
          console.log(err);
        });
    }
    getList();

    return {
      dataList,
      getList
    };
  }

and this is my template:

<template>
  <div>
    <div v-for="(item, index) in dataList.value" :key="index">
      <p> {{item.title}}</p>
      <img :src="item.pic_big"/>
    </div>
  </div>
</template>

but my data unable render in template?

[xieyezi]

console log(dataList.value) already able to output values,but not render in template.

[pangao66]

you needn't write .value in template part . you can see the docs https://vue-composition-api-rfc.netlify.com/#basic-example

[xieyezi]

like this:

<template>
  <div>
    <div v-for="(item, index) in dataList" :key="index">
      <p> {{item.title}}</p>
      <img :src="item.pic_big"/>
    </div>
  </div>
</template>

but still can not render data in template.

@pangao66

[doncatnip]

You should use ref instead of reactive here. If using reactive, you'd need to set a property like so:

const dataList = reactive({theList:[]})

So, ref is better suited.

PS: dataList.value is only set because you explicitly set it. .value is not an inherent property of reactive.

[xieyezi]

@doncatnip thank you,I got it.
But I still don't know the difference between ref and reactive.
I know reactive takes an object and returns a reactive proxy of the original. but ref,what does "ref" do? When should I use it? And what is the difference between them?
Hope to receive your reply！

[doncatnip]

Basically, you can use reactive when working with objects:

const user = reactive({name:'bob',surname:'ross',isOnline:false})

and ref for anything else:

const userList = ref([])
userList.value.push(user)

( Although, in this example userList.value.push would make bob ross reactive, even if it is a plain object. )

ref is a wrapper for single (primitive) values, basically analogous to C++ & references. You could come up with your own version of ref by using reactive({value:[]}). The reason Vue devs decided to include a ref is consistency - so that users do not have to come up with their own solutions that differ from one another slightly.

[xieyezi]

ok,I think I understand,thank you! @doncatnip