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

/ 68,315评论 / 406934阅读 / 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. Jamesexite说道:

    super kamagra: kamagra pills – sildenafil oral jelly 100mg kamagra

  2. Charlesvox说道:

    http://cenforce.pro/# cheapest cenforce

  3. Lewisfadon说道:

    В современном мире, где диплом – это начало отличной карьеры в любой отрасли, многие стараются найти максимально быстрый путь получения образования. Необходимость наличия документа об образовании переоценить попросту невозможно. Ведь диплом открывает двери перед любым человеком, который собирается вступить в сообщество профессионалов или продолжить обучение в высшем учебном заведении.
    Мы предлагаем очень быстро получить этот важный документ. Вы сможете приобрести диплом старого или нового образца, и это будет удачным решением для человека, который не смог закончить обучение, утратил документ или желает исправить плохие оценки. диплом изготавливается с особой аккуратностью, вниманием к мельчайшим элементам. На выходе вы получите 100% оригинальный документ.
    Превосходство данного решения заключается не только в том, что можно оперативно получить диплом. Весь процесс организован удобно, с профессиональной поддержкой. Начав от выбора подходящего образца диплома до правильного заполнения персональной информации и доставки по России — все находится под полным контролем квалифицированных мастеров.
    Всем, кто пытается найти оперативный способ получения необходимого документа, наша услуга предлагает отличное решение. Приобрести диплом – это значит избежать длительного процесса обучения и сразу переходить к достижению собственных целей, будь то поступление в университет или начало карьеры.

    https://diploman-russiyan.com

  4. RonaldSwobe说道:

    http://ciprofloxacin.tech/# purchase cipro

  5. KerrySharl说道:

    Компрессоры воздушные https://kompressorpnevmo.ru/ купить в Москве по лучшей цене. Широкий выбор брендов. Доставка по всей РФ. Скидки, подарки, гарантия от магазина.

  6. RandallGuesE说道:

    cost propecia: cost generic propecia price – cost of generic propecia without a prescription

  7. Davidfrify说道:

    lisinopril 20mg discount zestril discount lisinopril generic price comparison

  8. Lewisfadon说道:

    В наше время, когда диплом – это начало успешной карьеры в любой области, многие ищут максимально простой путь получения качественного образования. Наличие документа об образовании переоценить попросту невозможно. Ведь диплом открывает дверь перед всеми, кто собирается вступить в профессиональное сообщество или учиться в каком-либо университете.
    В данном контексте мы предлагаем максимально быстро получить любой необходимый документ. Вы сможете приобрести диплом, и это становится выгодным решением для человека, который не смог завершить образование, утратил документ или хочет исправить свои оценки. диплом изготавливается с особой аккуратностью, вниманием к мельчайшим элементам, чтобы на выходе получился полностью оригинальный документ.
    Преимущество такого подхода состоит не только в том, что вы оперативно получите свой диплом. Процесс организовывается удобно и легко, с профессиональной поддержкой. Начав от выбора необходимого образца до консультаций по заполнению персональной информации и доставки по стране — все будет находиться под полным контролем опытных специалистов.
    Всем, кто ищет быстрый способ получения требуемого документа, наша компания предлагает выгодное решение. Заказать диплом – это значит избежать долгого обучения и не теряя времени перейти к достижению личных целей: к поступлению в ВУЗ или к началу удачной карьеры.

    https://diploman-rossiya.com

  9. JamesKab说道:

    На этом сайте https://www.rabota-zarabotok.ru/ вы найдете полезную информацию, и отзывы о разных финансовых сайтах. Здесь очень много полезной информации, и разоблачение мошенников. А также узнайте где начать зарабатывать первые деньги в интернете.

  10. Davidfrify说道:

    clomid nolvadex tamoxifen rash pictures tamoxifenworld

  11. FobertAreld说道:

    В современном мире, где диплом является началом успешной карьеры в любой отрасли, многие стараются найти максимально быстрый путь получения образования. Факт наличия официального документа об образовании переоценить попросту невозможно. Ведь диплом открывает дверь перед людьми, стремящимися начать профессиональную деятельность или продолжить обучение в ВУЗе.
    Предлагаем очень быстро получить этот важный документ. Вы можете приобрести диплом старого или нового образца, и это становится удачным решением для человека, который не смог завершить образование или потерял документ. Каждый диплом изготавливается с особой аккуратностью, вниманием к мельчайшим элементам, чтобы на выходе получился документ, максимально соответствующий оригиналу.
    Преимущества этого подхода состоят не только в том, что вы максимально быстро получите диплом. Весь процесс организован просто и легко, с профессиональной поддержкой. От выбора необходимого образца документа до консультации по заполнению личных данных и доставки по России — все под полным контролем квалифицированных мастеров.
    Для тех, кто ищет быстрый и простой способ получения требуемого документа, наша компания предлагает выгодное решение. Заказать диплом – это значит избежать длительного обучения и не теряя времени переходить к достижению личных целей, будь то поступление в университет или начало удачной карьеры.
    https://diploman-russiyans.com

  12. Watch 18 movie说道:

    That must be the tenth time I’ve been arrested for selling deep-fried cigars.

  13. WilliamRen说道:

    https://nolvadex.life/# tamoxifen medication

  14. RandallGuesE说道:

    ciprofloxacin generic price: buy cipro – purchase cipro

  15. OLaneuncog说道:

    В современном мире, где диплом – это начало отличной карьеры в любом направлении, многие стараются найти максимально простой путь получения образования. Важность наличия официального документа сложно переоценить. Ведь именно диплом открывает дверь перед всеми, кто стремится начать профессиональную деятельность или продолжить обучение в высшем учебном заведении.
    В данном контексте мы предлагаем очень быстро получить этот важный документ. Вы можете заказать диплом нового или старого образца, и это будет удачным решением для всех, кто не смог закончить обучение, потерял документ или желает исправить свои оценки. дипломы изготавливаются аккуратно, с максимальным вниманием ко всем элементам. На выходе вы получите продукт, максимально соответствующий оригиналу.
    Преимущества подобного подхода заключаются не только в том, что вы сможете оперативно получить свой диплом. Процесс организован комфортно, с профессиональной поддержкой. От выбора необходимого образца документа до точного заполнения личных данных и доставки по России — все под абсолютным контролем наших специалистов.
    В итоге, для тех, кто пытается найти максимально быстрый способ получить требуемый документ, наша услуга предлагает выгодное решение. Приобрести диплом – это значит избежать долгого процесса обучения и не теряя времени перейти к достижению своих целей, будь то поступление в ВУЗ или начало удачной карьеры.
    https://diploman-russiyans.com

  16. WilliamRen说道:

    http://lisinopril.network/# lisinopril tabs 40mg

  17. Davidfrify说道:

    cytotec pills buy online buy cytotec pills online cheap buy cytotec online fast delivery

回复 WilliamRen 取消回复

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