1. 性能提升
Vue3 重写虚拟DOM  ，性能更好

对比：
Vue3 基于 Proxy ，Vue2 基于 Object.defineProperty 

Object.defineProperty:

const data = {};
Object.defineProperty(data, 'property1', {
  value: 42,
  writable: false
});

Proxy:
const data = {a: 1};
const proxy = new Proxy(data, {
  get(target, prop) {
    return target[prop];
  },
  set(target, prop, value) {
    target[prop] = value;
    console.log('property set');
    return true;
  }
});

为何 Proxy 的性能更好？

响应性机制
Object.defineProperty 需要递归地遍历一个对象的所有属性并为其定义 getter 和 setter，这在大型对象上可能非常缓慢。
相反，Proxy 可以拦截整个对象，而无需逐个处理属性。

数组问题
Vue2  为了检测到数组的变化， 必须覆盖数组的原型方法（如 push、pop 等），这是一个复杂且可能产生错误的过程。
Vue3  可以更简单、更直接地拦截数组的变化。

精细的变更检测
Vue3 可以更精确地检测对象的变化。
例如，添加或删除属性时，Proxy 可以立即捕获这些变化，而 Object.defineProperty 则无法捕获这类变化。

未来的优化
由于 Proxy 是 ECMAScript 的一个标准特性，未来的 JavaScript 引擎可能会为其提供更多的优化，从而进一步提高性能。




2. 组合式 API
Vue3 引入了组合式 API，这是一套全新的、可选的、基于函数的 API。

Vue2:

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}



Vue3:
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
}



3. 按需 Tree Shaking
Vue3 大部分核心功能都是基于 Tree shaking 的，只有使用的部分才会被打包进最终的代码。
打出来的包更小





4. 更多的内置组件
Vue3 提供了更多的内置组件，如 <Suspense> 和 <Teleport>


<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>


<Teleport to="body">
  <div>This will be moved to body tag</div>
</Teleport>


5. 更好的 TypeScript 支持
Vue3 源代码完全是用 TypeScript 编写的，这意味着它提供了更好的 TS 支持


6. 新的自定义事件 API
Vue3 提供了一个更好、更简洁的 API 来处理组件的自定义事件


Vue 2:
this.$emit('event-name', payload);

Vue 3:
const emit = ctx.emit;
emit('event-name', payload);



7. 多个根节点
Vue3 中，单文件组件可以有多个根节点


Vue2:

<template>
  <div>
    <span>Item 1</span>
    <span>Item 2</span>
  </div>
</template>


Vue3:

<template>
  <span>Item 1</span>
  <span>Item 2</span>
</template>


8. 更好的默认插槽 API ，更简洁，更直观。

9. 移除了过滤器
Vue3 完全移除了过滤器，推荐使用计算属性或方法代替。


Vue2:
<template>
  <div>{{ message | capitalize }}</div>
</template>

<script>
export default {
  filters: {
    capitalize: function (value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
}
</script>


Vue3:

<template>
  <div>{{ capitalize(message) }}</div>
</template>

<script>
export default {
  methods: {
    capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
}
</script>

10. Portal、Fragments、Suspense 等新特性
Vue3 还引入了一些其他的新特性和改进。

Fragments: 允许模板有多个根节点。
Suspense: 为异步组件提供了内置支持。