Vue3常用语法记录，基础使用看这篇就够了

1、ref

const test = ref(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

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