第三，在元素级别，编译器还根据需要执行的更新类型，为每个具有动态绑定的元素生成一个优化标志，例如具有动态类绑定和许多静态属性的元素将收到一个标志，提示只需要进行类检查，运行时将获取这些提示并采用专用的快速路径。
TypeScript的支持Vue2中使用的都是Js，其本身并没有类型系统这个概念，现如今TypeScript异常火爆，对于规模很大的项目，没有类型声明，后期维护和代码的阅读都是头疼的事情，虽然Vue2实际上也是可以使用TS的，但是支持并不算特别完美，此外Vue2的源码也是使用Facebook的Flow做类型检查。
最终Vue3借鉴了React Hook实现了更自由的编程方式，提出了Composition API，Composition API不需要通过指定一长串选项来定义组件，而是允许用户像编写函数一样自由地表达、组合和重用有状态的组件逻辑，同时提供出色的TypeScript支持。
Vue2官方说明运行时打包23k，但这只是没安装依赖的时候，随着依赖包和框架特性的增多，有时候不必要的，未使用的代码文件都被打包了进去，所以后期项目大了，打包文件会特别多还很大。
在Vue3中，通过将大多数全局API和内部帮助程序移动到JavaScript的module.exports属性上实现这一点，这允许现代模式下的module bundler能够静态地分析模块依赖关系，并删除与未使用的module.exports属性相关的代码，模板编译器还生成了对Tree Shaking摇树优化友好的代码，只有在模板中实际使用某个特性时，该代码才导入该特性的帮助程序，尽管增加了许多新特性，但Vue3被压缩后的基线大小约为10KB，不到Vue2的一半。
Vue3相对于Vue2的非兼容的变更概括，详情可以查阅https://v3.cn.vuejs.org/guide/migration/introduction.html。
全局API全局Vue API已更改为使用应用程序实例。
全局和内部API已经被重构为可tree-shakable。
模板指令组件上v-model用法已更改，替换v-bind.sync。
<template v-for>和非v-for节点上key用法已更改。
在同一元素上使用的v-if和v-for优先级已更改。
v-bind="object"现在排序敏感。
v-on:event.native修饰符已移除。
v-for中的ref不再注册ref数组。
组件只能使用普通函数创建功能组件。
functional属性在SFC单文件组件<template>和functional组件选项被抛弃。
异步组件现在需要defineAsyncComponent方法来创建。
组件事件现在需要在emits选项中声明。
渲染函数渲染函数API改变。
$scopedSlots property已删除，所有插槽都通过$slots作为函数暴露。
$listeners被移除或整合到$attrs。
$attrs现在包含class and style attribute。
自定义元素自定义元素白名单现在已经在编译时执行。
对特殊的is prop的使用只严格限制在被保留的<component>标记中。
其他小改变destroyed生命周期选项被重命名为unmounted。
beforeDestroy生命周期选项被重命名为beforeUnmount。
default prop工厂函数不再可以访问this上下文。
自定义指令API已更改为与组件生命周期一致。
data选项应始终被声明为一个函数。
来自mixin的data选项现在为浅合并。
Attribute强制策略已更改。
一些过渡class被重命名。
<TransitionGroup>不再默认渲染包裹元素。
当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则需要指定deep选项。
没有特殊指令的标记v-if/else-if/else、v-for、v-slot的<template>现在被视为普通元素，并将生成原生的<template>元素，而不是渲染其内部内容。
在Vue2中，应用根容器的outerHTML将替换为根组件模板，如果根组件没有模板/渲染选项，则最终编译为模板，Vue3现在使用应用容器的innerHTML，这意味着容器本身不再被视为模板的一部分。
移除APIkeyCode支持作为v-on的修饰符。
$on、$off和$once实例方法
过滤器方法，建议用计算属性或方法代替过滤器。
内联模板attribute。
$children实例property。
$destroy实例方法，用户不应再手动管理单个Vue组件的生命周期。
示例Vue3的组件简单示例，可查看在线示例https://codesandbox.io/s/c1437?file=http://www.likecs.com/src/App.vue。
<template> <div> <div>{{ msg }}</div> <div>count: {{ count }}</div> <div>double-count: {{ doubleCount }}</div> <button @click="multCount(3)">count => count*3</button> </div> </template> <script> import { onMounted, reactive, computed } from "vue"; export default { name: "App", components: {}, setup: () => { /* 定义data */ const data = reactive({ msg: "Hello World", count: 1, }); /* 处理生命周期 */ onMounted(() => { console.log("Mounted"); }); /* 处理computed */ const computeds = { doubleCount: computed(() => data.count * 2), }; /* 定义methods */ const methods = { multCount: function (n) { data.count = data.count * n; }, }; /* 返回数据 */ return Object.assign(data, computeds, methods); }, }; </script> <style> </style> 每日一题 https://github.com/WindrunnerMax/EveryDay 参考 https://zhuanlan.zhihu.com/p/92143274 https://www.jianshu.com/p/9d3ddaec9134 https://zhuanlan.zhihu.com/p/257044300 https://juejin.cn/post/6867123074148335624 https://juejin.cn/post/6892295955844956167 https://segmentfault.com/a/1190000024580501 https://v3.cn.vuejs.org/guide/migration/introduction.html