从Vue2到Vue3——Vue3的改变

在Vue3中，有许多重要的改变和新特性，包括Composition API、Fragment、Teleport、Emits 校验等。

1. Composition API: Vue3引入了一个新的配置项setup函数，它是所有Composition API的入口。在setup函数中，我们可以使用reactive、ref、computed和watch等新的API来处理状态、响应式数据和逻辑。

import { reactive, ref, computed, watch, onMounted } from 'vue';
 
export default {
  setup() {
    const state = reactive({ count: 0 });
    const double = computed(() => state.count * 2);
 
    function increment() {
      state.count++;
    }
 
    onMounted(() => {
      console.log('Component is mounted!');
    });
 
    return {
      state,
      double,
      increment
    };
  }
}

2. Fragment: Vue3中不再需要为每个组件提供一个根元素。可以直接返回多个元素。

import { h } from 'vue';
 
export default {
  render() {
    return [
      h('div', 'First part'),
      h('div', 'Second part')
    ];
  }
}

3. Teleport: Teleport 组件可以将我们的组件HTML结构移动到DOM中的其他位置。

<teleport to="body">
  <div>This will be teleported to body</div>
</teleport>

4. Emits 校验: Vue3中，我们可以使用emits配置选项来定义要从子组件发出的事件，并且可以指定这些事件的校验。

export default {
  emits: {
    'update:modelValue': (value) => typeof value === 'string',
    deleteItem: (id) => typeof id === 'number',
  },
  methods: {
    updateModelValue(value) {
      this.$emit('update:modelValue', value);
    },
    delete(id) {
      this.$emit('deleteItem', id);
    },
  },
}

这些是Vue3的一些主要改变和新特性，实际上Vue3还有许多其他的改变和新特性，包括更好的TypeScript支持、Better Performance、New Renderer、Custom Renderer API等。