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

/ 41,834评论 / 185270阅读 / 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>
  1. DavidDiege说道:

    darknet markets 2023 darknet market lists darknet markets 2023

  2. Henryber说道:

    darknet site the dark internet darknet drug links

  3. Henryber说道:

    tor darknet dark market link darknet market lists

  4. RonaldBon说道:

    tor markets dark markets 2023 dark web search engines

  5. WilliamPhync说道:

    tor dark web tor markets how to access dark web

  6. AllenBus说道:

    dark web search engine tor markets links dark web sites

  7. RonaldBon说道:

    darknet drugs darknet market dark web search engine

  8. Devingoask说道:

    dark market link tor markets tor markets 2023

  9. AllenBus说道:

    darkmarkets darknet drug store darknet market

  10. TracyFoome说道:

    farmaci senza ricetta elenco: farmacia online – farmacia online senza ricetta

  11. WilliamPhync说道:

    the dark internet dark web sites dark web market list

  12. Henryber说道:

    tor markets links onion market bitcoin dark web

  13. Sonnynap说道:

    viagra generico prezzo piГ№ basso: viagra prezzo farmacia – pillole per erezione in farmacia senza ricetta

  14. RonaldBon说道:

    onion market darkmarket url dark web search engines

  15. AllenBus说道:

    tor marketplace darkweb marketplace dark web search engine

  16. Devingoask说道:

    deep dark web deep web markets drug markets onion

  17. Sonnynap说道:

    farmacie online sicure: kamagra – farmacia online senza ricetta

  18. Henryber说道:

    darkmarket darknet drug links darknet drug market

  19. WilliamPhync说道:

    darknet drug market deep web drug store tor marketplace

  20. AllenBus说道:

    tor market darkmarket dark web drug marketplace

  21. TracyFoome说道:

    comprare farmaci online all’estero: farmacia online miglior prezzo – farmacia online migliore

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注