//undefined //beforeCreate
<script lang="ts">
  export default {
    setup() {
      console.log(this);
    },
    beforeCreate() {
      console.log("beforeCreate");
    },
  };
</script>

<script lang="ts">
  export default {
    setup() {
      let count = 1;
      return {
        count,
      };
    },
  };
</script>

<template>
  <h1>{{count}}</h1>
  <button @click="count++">+1</button>
</template>

//与上方代码完全相同
<script setup lang="ts">
  let count = 1;
</script>

<template>
  <h1>{{ count }}</h1>
  <button @click="count++">+1</button>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  let count = ref(1)
  count.value++
</script>

<template>
  <h1>{{ count }}</h1>
  <button @click="count++">+1</button>
</template>
<style>

<script setup lang="ts">
  import { reactive } from "vue";
  const person = reactive({
    name: "suemor",
    age: 18,
  });
  const changePerson = () => {
    (person.name = "小杰"), (person.age = 28);
  };
  // const name = reactive('小黄') 无效写法
</script>

<template>
  <button @click="changePerson">点我改变person属性</button>
  <ul>
    <li v-for="(item, index) in person" :key="index">{{item}}</li>
  </ul>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  const num1 = ref(1)
  const num2= ref(1)
  const sum = computed(()=>num1.value + num2.value)
</script>

<template>
  <h1>{{sum}}</h1>//2
</template>
<style>

<script setup lang="ts">import {watch,reactive, ref } from 'vue';
  const person = ref('')
  watch(person,(oldValue,newValue)=>{
    console.log(oldValue,newValue);
  })
</script>

<template>
  <input v-model="person" type="text" placeholder="请输入姓名">
</template>
<style>

<template>
  <h1>{{ props.msg }}</h1>
  <button @click="handleClick">点击我调用父组件方法</button>
</template>
<script setup lang="ts">
  //props
  const props = withDefaults(
    defineProps<{
      msg?: string;
    }>(),
    {
      msg: "我是默认值",
    }
  );

  //emits
  const emit = defineEmits<{
    (e: "on-change", data: string): void;
  }>();
  const handleClick = () => emit("on-change", "父组件方法被调用了");
</script>

<script setup lang="ts">
  import { ref } from "vue";
  import TestPropsEmit from "./views/TestPropsEmit.vue";
  const msg = ref("我是来自父组件的值");
  const handleChange = (data: string) => {
    console.log(data);
  };
</script>

<template>
  <TestPropsEmit :msg="msg" @on-change="handleChange" />
</template>