vue3使用记录

常用：ref,toRefs,reactive

reactive是响应式的

1. 数组如何写成响应式的

我的错误代码

const tableData = reactive([]) //表格数据

const load = () => {
  const res = [1, 2, 3]// 假设是接口返回的数据
  tableData = res
}

这样是不行的，无法响应。

解决方法一

const load = () = > {
   res.forEach((item)=>{
       tableData.push(item)
   })
}

解决方法二

const tableData = reactive({ arr: [] }) //表格数据
const res = [1,2,3] //假设是接口返回的数据
const load = () => {
    tableData.arr = res
}

解决方法三

const tableData = ref([]) //表格数据
const res = [1,2,3] //假设是接口返回的数据
const load = () => {
    tableData.value = res
}

一种赋值方式

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { getTeamInfo } from "@/api/userCenter";
defineOptions({
  name: "MyTeam"
});
const teamInfo: userCenterTs.TeamInfo = reactive({});

onMounted(async () => {
  const { data } = await getTeamInfo();
  Object.assign(teamInfo, data);
  // 可以直接把对象塞进去，不用逐一解构，再放进去
});
</script>

<template>
  <h1>我的团队</h1>
</template>

2. vue3渲染HTML内容的指令

   v-html

<div v-html="agreementHTML" />

在<style lang="scss" scoped></style>中给渲染的html写样式不生效，需要用穿透:deep()

:deep(.html-class-name) {
  font-size: 16px;
}