[Vue3]在setup中声明响应式数据(ref,reactive)

/ 66评论 / 828阅读 / 2点赞

响应式数据是vue的一大亮点,下面我们来聊聊如何声明响应式数据

直接声明变量

<script setup>
let num = 0;
const clickFun = () => {
    console.log("num:", ++num);
}
</script>

<template>
    <div style="display:flex;flex-direction: column;">
        <span>num : {{num}}</span>
        <button @click="clickFun()">修改</button>
    </div>
</template>

ref(基本数据类型)

<script setup>
import { ref } from 'vue';

let num = 0;
let refNum = ref(0);
console.log("refNum:", refNum);
console.log("refNum.value", refNum.value);

const clickFun = () => {
    console.log("num:", ++num);
    console.log("refNum.value:" , ++refNum.value);
}
</script>

<template>
    <div style="display:flex;flex-direction: column;">
        <span>num : {{num}}</span>
        <span>refNum : {{refNum}}</span>
        <button @click="clickFun()">修改</button>
    </div>
</template>

reactive(对象)

<script setup>
import { ref,reactive } from 'vue';

let num = 0;
let refNum = ref(0);
let rea = reactive({
    num:0
});

console.log("refNum:", refNum);
console.log("refNum.value", refNum.value);
console.log("rea", rea);

const clickFun = () => {
    console.log("num:", ++num);
    console.log("refNum.value:" , ++refNum.value);
    console.log("rea.num:", ++rea.num);
}

</script>

<template>
    <div style="display:flex;flex-direction: column;">
        <span>num : {{num}}</span>
        <span>refNum : {{refNum}}</span>
        <span>rea.num : {{rea.num}}</span>
        <button @click="clickFun()">修改</button>
    </div>
</template>

发表回复

您的电子邮箱地址不会被公开。