Vue3问题汇总

一、使用props传递保持如何保持数据响应式

父组件

<script setup lang="ts">
let Data = reactive([
    {
        id: 2,
        text: '2',
        isFinished: false,
        isChecked: false
    },
    {
        id: 1,
        text: '1',
        isFinished: true,
        isChecked: true
    },
])
</script>


<template>
    <todoItemComponent v-if="Data.length != 0" :itemData="item" class="todoItem" v-for="item in Data" :key="item.id" />
</template>

我们在父组件中传递了一个Props 属性名为 itemData
然后我们在子组件中接收

子组件

【方法一】注：该方法使用了Vue3的实验性语法糖功能，需要在Vue插件中显式开启

// vite.config.js
export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}

<script setup lang="ts">
import {  toRefs } from "vue"

// 首先定义一个接口，用于Props的响应式接收和解构赋值
// 传递进来的属性为一个名为itemData的对象，定义好对象中的属性以及类型
interface PropsInter {
    itemData: {
        id: number,
        text: string,
        isChecked: boolean,
        isFinished: boolean
    }
}
// 在此处使用defineProps来接收属性，传入的接口中有哪些属性，就接收哪些属性，而且可以解构赋值
let { itemData } = defineProps<PropsInter>()

//如果要继续解构，则需要使用toRefs才能保持响应性，切记不可使用多重解构
let { id, text, isChecked, isFinished } = toRefs(itemData)
</script>

方法二【不使用语法糖】

<script setup lang="ts">
import { toRefs } from "vue"
// 需要额外引入type Ref
import type { Ref } from 'vue'

// 正常接收属性
let props = defineProps(['itemData'])
// 定义接口，如果属性是一个对象，要将该对象里面的属性都设置为Ref<...>
interface PropsInter {
    id: Ref<number>,
    text: Ref<string>,
    isChecked: Ref<boolean>,
    isFinished: Ref<boolean>
}
//先将属性转为上述接口类型，再使用toRef进行解构赋值
let { id, text, isChecked, isFinished } = toRefs(props.itemData) as unknown as PropsInter
</script>

注意事项

以上两种方法，最后解构赋值得到的属性（id, text, isChecked, isFinished）在script标签中使用时，都作为ref声明的属性，需要使用.value得到具体的值