<template>
  <div>{{ name }}: {{ counter }} {{ obj.title }}</div>
  <div>{{ twiceTheCounter }}</div>
  <button @click="action">点击</button>
</template>

<script setup>
import {ref, reactive, onMounted, watch, computed} from "vue";
// props
const props = defineProps({
  name: String,
})
// data
const counter = ref(0);
const obj = reactive({title: "组件C标题"});
// computer
const twiceTheCounter = computed(() => counter.value * 2);
// watch
watch(counter, (newValue, oldValue) => {
      console.log(newValue, oldValue);
      obj.title = "组件C标题---新"
    }
);
// methods
const action = () => {
  counter.value = counter.value + 3;
}
// hook
onMounted(() => {
  console.log("onMounted")
})
</script>

<style scoped>

</style>