Day1-08.组合式API-watch-基本使用和立即执行

发布于：2024-01-05 21:55:38

<template>
  <div><button @click="setCount">+ {{count}}</button></div>
</template>


<script setup>

import {  ref, watch } from 'vue'

const count=ref(0)

const setCount=()=>{
  count.value++;
}

watch(count,(newVal,oldVal)=>{
  console.log("count变化了",newVal,oldVal)
})

</script>


<style scoped>
.wrapper {
  display: flex;
  place-items: center;
  flex-wrap: wrap;
}

.item {
  margin: 0 0 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
}


header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>