Vue3中的ref和reactive

vue3中使用的ref和reactive实现数据的响应式
基本数据类型使用ref
对象类型使用reactive

<template>
  <div>
    <p>res is: {{ res }}</p>
    <p>dataList1 is: {{ dataList1.count }}</p>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const res = ref(0)
let res1= reactive({count:0})
let dataList1 = reactive({count:1})
</script>

<style scoped>
</style>

注意使用reactive的时候里面的必须是对象累型，不能是数组

  let dataList = reactive(data:[])
 //这样不会报错但是数据不是响应式
 //我们从后端请求来的数据通常是一个数组列表，
 //	应该写成对象的形式
 let dataList = reactive({data:[]})
  const getData = async () => {
    let  data  = await http.get('/getnews')
    dataList.data = [...data.newslist]
  }
  
  //但是在渲染的时候需要增加一层，有点不方便
<template>
  <ul>
 	<li v-for="item in dataList.data" :key="item.id">{{ item.descript }}</li>
 </ul>
</template>