<script lang="ts" setup name="TheWelcome">
import { ref, watch } from "vue";

// eslint-disable-next-line prefer-const
let sum = ref(0)

function changesum() {
  sum.value += 2
}

//监视                          新数据   旧数据
const stopWatch = watch(sum, (newValue, OldValue) => {
  console.log('变化了', newValue, OldValue );
  if(newValue >= 10) {
    stopWatch()
  }
})
</script>

<template>
  <div class="TheWelcome">
    <h1>情况一:监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和{{ sum }}</h2>
    <button @click="changesum">点击加一</button>
    </div>
</template>

<style scoped>
/*
  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
  因为使用了`scoped`属性，确保样式不会影响到其他组件
*/
.TheWelcome {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px; /* 添加阴影效果 */
  border-radius: 10px; /* 设置圆角半径 */
  padding: 20px; /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}

/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
li {
  font-size: 20px;
}
</style>
