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>