<template>
  <a-card>
    <div>
      <h1>首页</h1>
    </div>
    <div>{{ list }} - {{ stateCount }}</div>
    <div>
      {{ state }}
      <a-button type="primary" @click="() => state.count++">点击+1</a-button>
    </div>
    <div>
      {{ i }}
      <a-button type="primary" @click="changeClick">点击+1</a-button>
    </div>
    <div>
      <RouterLink to="/site/index2">跳转到子页</RouterLink>
    </div>
    <div>
      <RouterLink to="/dashboard/analysis">跳转到后页</RouterLink>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, onMounted } from 'vue';
  // reactive
  let list = reactive({ list: [] });
  //针对基础类型
  const state = ref({ count: 0 });
  let i = ref(1);

  //计算属性
  const stateCount = computed(() => {
    return state.value.count;
  });

  onMounted(() => {
    console.log('页面加载完了！');
  });

  //方法
  function changeClick() {
    i.value++;
    // list.list.push({ key: i.value });
  }
</script>
