El uso de ref y reactivo en Vue3

Hoy en día, las variables no pueden actualizar la vista en el proceso de usar reactivo en el proyecto. Reactivo generalmente se usa para objetos

<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
        }
    }
})

Tenga en cuenta que las variables declaradas por ref deben usar la asignación .value para implementar la capacidad de respuesta.

Si es una declaración reactiva, debe usar forEach para procesarla una por una, y la copia directa no se puede procesar de manera receptiva.

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