vue3

reactive响应式
1.对象类型

import { reactive, toRefs } from "vue";
const user = reactive({
 name: 'Vue2',
 age: 18,
});
user.name = 'Vue3'；
let {name}=toRefs(user);//解构时需要用toRefs，否则会消除响应式

2基本类型

const num = ref(0);//定义初始值
num.value++;

defineProps

const props = defineProps<{
  size: string;
  name: string;
}>();//父传子属性值
console.log(props.id)//不加props.拿不到值
<span>{{id}}</span><--!组件使用时不用加props.-->

defineEmits

// 定义Emits(子组件)
    const emits = defineEmits<{
        (e: 'add', id: number): void
    }>()

    const btnAdd = () => {
        emits('add',2)
    }//子组件调用父组件方法add()
//父组件
<child @add="add"><child/>
<script setup lang="ts">
  const add = (num:number)=>{
    result.value+=num
}
</script>