<template>
  <view class="counter">
    <text>{{ count }}</text>
    <button @tap="increment">+1</button>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

const increment = () => {
  count.value++
}

onMounted(() => {
  console.log('组件已挂载')
})
</script>

<template>
  <view @tap="handleClick">
    <text>{{ title }}</text>
  </view>
</template>

<script setup lang="ts">
interface Props {
  title: string
  count?: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  click: [value: number]
  update: [data: any]
}>()

const handleClick = () => {
  emit('click', props.count || 0)
}
</script>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'

// ref
const message = ref('Hello World')

// reactive
const state = reactive({
  user: { name: 'Vue3', age: 4 },
  loading: false
})

// computed
const displayName = computed(() => {
  return `${state.user.name} (${state.user.age}岁)`
})

// watch
watch(message, (newVal, oldVal) => {
  console.log(`消息从 ${oldVal} 变为 ${newVal}`)
})
</script>

<template>
  <view class="my-component">
    <text class="global-text">使用全局样式</text>
  </view>
</template>

<script setup lang="ts">
// 导入全局样式文件
import '../assets/css/global.scss'
import '../assets/css/variables.scss'

// 组件逻辑...
</script>

<style lang="scss" scoped>
.my-component {
  padding: 20rpx;
}
</style>

<template>
  <view class="styled-component">
    <text class="primary-text">主要文本</text>
  </view>
</template>

<script setup lang="ts">
// 组件逻辑...
</script>

<style lang="scss" scoped>
// 导入变量和混合宏
@import '../assets/css/variables.scss';
@import '../assets/css/mixins.scss';

.styled-component {
  @include flex-center;
  background: $primary-color;

  .primary-text {
    color: $text-color;
    font-size: $font-size-large;
  }
}
</style>