L'utilisation de ref et reactive dans Vue3

Aujourd'hui, les variables ne peuvent pas mettre à jour la vue dans le processus d'utilisation de réactif dans le projet. Réactif est généralement utilisé pour les objets

<template>
    <div class="wrapper">
        <el-checkbox :indeterminate="isInderterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities">
            <el-checkbox v-for="(city,index) in cities" :key="index" :label="city" @click="">{
   
   {city}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script lang="ts" src="./insight-4d-test.ts"></script>
<style lang="scss" scoped src="./insight-4d-test.scss"></style>

import { defineComponent, onMounted, ref, reactive,getCurrentInstance } from "@vue/composition-api"
export default defineComponent({
    setup(props, { root }) {
        const instance: any = getCurrentInstance();
        const checkAll:boolean=ref(false);
        // var checkedCities:string[] = reactive([]);
        var checkedCities = ref<string[]>([]);
        const cities: string[] = reactive(['北京', '上海','广州','深圳']);
        
        const handleCheckAllChange=(val:boolean)=>{
            checkedCities.value=val?cities:[]
        }
        return{
            checkAll,
            checkedCities,
            cities,
            handleCheckAllChange
        }
    }
})

Notez que les variables déclarées par ref doivent utiliser l'affectation .value pour implémenter la réactivité.

S'il s'agit d'une instruction réactive, vous devez utiliser forEach pour la traiter une par une, et la copie directe ne peut pas être traitée de manière réactive

 const cities: string[] = reactive(['北京', '上海','广州','深圳']);
 const checkedCities:string[]=reactive([])    
 const handleCheckAllChange=(val:boolean)=>{
    if(val){
        cities.forEach(item=>{
           checkedCities.push(item)
       })
    }else{
        checkedCities.splice(0)
    }
    
 }