vue3.0
这6个Vue3新特性需知道: 1、性能比vue2.x快1.2~2倍-Performance; 2、支持tree-shaking-Tree shaking support; 3、引入了Composition API-Composition API; 4、暴露了自定义渲染API-Custom Renderer API; 5、新增三个组件(Fragment、Teleport、Suspense); 6、更好的支持TS-Better TypeScript support; 一、Performance 1、Vue3.0在性能方面比Vue2.x快了1.2~2倍。 2、重写虚拟DOM的实现 3、运行时编译 4、静态提升与事件侦听器缓存 5、SSR 速度提高 二、Three-shaking support Vue3.x中的核心API都支持tree-shaking,这些API都是通过包引入的方式而不是直接在实例化时就注入,只会对使用到的功能或特性进行打包(按需打包),这意味着更多的功能和更小的体积。 三、Composition API Vue2.x中,我们通常采用mixin来复用逻辑代码,使用起来虽然方便,但也存在一些问题:代码来源不清晰、方法属性可能出现冲突。因此,Vue3.x引入了Composition API(组合API),使用纯函数分割复用代码。和React Hooks的概念相似。 1、更好的逻辑复用和代码组织 2、更好的类型推导 四、Fragment、Teleport、Suspense 1、Fragment 在书写Vue2.x时,由于组件必须是一个根结点,很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的(这和React 中的Fragment组件是一样的)。 2、Teleport Teleport其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。 五、API-Custom Renderer API vue官方实现的 createApp 会给我们的 template 映射生成 html 代码,但是要是你不想渲染生成到 html ,而是要渲染生成到 canvas 之类的不是html的代码的时候,那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。
v-model
与2.x相比,v-model的默认值由value变为modelValue,更新事件由change变为update:modelValue。 新增多具名v-model:name以及自定义修饰符。对新支持的多个v-model,需用update:name事件更新。 新增自定义修饰符在默认v-model由modelModifiers接收,多具名v-madel用nameModifiers接收。
Vue2.0与Vue3.0区别总结
