1、ref

const test = ref<number>(8)

2、reactive

const testObj = reactive({
    test001: '',
    test002: ''
})

3、props & defineEmits

defineProps({
    icon: String,
});
const emit = defineEmits(['change', 'update:value', 'format-error']);
emit('update:value', v);

4、watch

// 当count改变时触发
watch(count, (val, oldVal) => {
    console.log(val, oldVal);
});

5、watchEffect

setup() {
    const count = ref(0);
    watchEffect(() => {
      console.log(count.value); // 初始化时会执行一次
    });
    setTimeout(() => {
      count.value += 1; // 值变化时又执行了一次
    }, 1000);
}

区别：
    watchEffect会自动的收集依赖，而watch是明确的指定监听某个变量
    watch可以获取到新值和旧值，watchEffect则只能取到最新的
    watchEffect会在初始化的时候执行一次，类似computed

6、computed

const sayHello = computed(() => {
    console.log('computed', count.value);
    return `我是${name.value},${count.value}岁`;
});

computed和watchEffect相同的地方是会自动收集依赖，在值更新时会触发回调，会初始化调用一次。
但是在触发初始化的时机是不一样的，如果computed的值没有被使用，是不会触发回调的，只有在该值被使用的时候才会触发回调，但watchEffect是在setup的时候就会初始化。

7、toRef & toRefs

<template>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>地址：{{addr.province}}-{{addr.city}}</h2>
    <button @click="name='zhangsan'">修改名字</button>
</template>
<script lang='ts'>
    import { reactive, toRefs } from 'vue'
    export default {
        setup() {
            const user = reactive<any>({
                name: '张三',
                age: 19,
                addr: {
                    province: '河南',
                    city: '郑州'
                }
            })
            return {
                name: toRef(obj,"name"),
                ...toRefs(user)
            }
        }
    }
</script>

将响应式对象中的所有属性转换为单独的响应式数据，对象成为普通对象toRefs是toRef的批量操作