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

<script>
import {ref, reactive, onMounted, watch, computed} from "vue";

export default {
  props: {
    name: String,
  },

  setup() {
    // data
    const counter = ref(0);
    const obj = reactive({title: "组件B标题"});
    // computed
    const twiceTheCounter = computed(() => counter.value * 2);
    // watch
    watch(counter, (newValue, oldValue) => {
      console.log(newValue, oldValue);
      obj.title = "组件B标题---新"
    });
    // methods
    const action = () => {
      counter.value = counter.value + 3;
    };
    // hook
    onMounted(() => console.log("onMounted"));

    return {
      counter,
      obj,
      twiceTheCounter,
      action
    };
  }
};
</script>

<style scoped>

</style>
