ZUCC_移动应用交互设计VUE3.0_LAB9响应式数据

注意ref的变量对值操作要用value

count.value

<template>
  字符串的反转:{{message}}<br>
  计数量:{{count}},该数据是否是响应式{{computedFlag}}<br>
  <button @click="test">测试</button>
  
</template>

<script>
import {reactive,toRefs,ref,computed,isRef} from 'vue';
export default {
    setup(){
        const state = reactive({
            message: 'hello vue3 world!',
            refFlag:true,
        })
        let count = ref(0);
        const test = ()=>{
            state.message = state.message.split('').reverse().join('');
            count.value = count.value==0?1:0;
        }
        const computedFlag = computed(()=>{
            if(isRef(count)){
                state.refFlag = true;
            }
            else{
                state.refFlag = false;
            }
            return state.refFlag
        })
        return {
            ...toRefs(state),
            count,
            test,
            computedFlag
        }
    }
}
</script>

<style>

</style>