【vue3新特性】

vue3新特性

响应式变更

vue3使用ES6的Proxy代理劫持整个对象，不兼容IE

• 优点
  1.劫持整个对象解决了vue2的未在data定义属性劫持不到问题，数组索引下标操作劫持不到问题
  2.因为劫持整个对象不需要递归遍历，提升性能
• 缺点
  1.不支持IE
  2.reactive定义引用数据如果不包层对象，丢失响应式

diff性能提升

vue2 diff比对算法采用全双端比较而vue3 diff算法采用静态提升加静态标记，非全量diff算法，并且采用最长递增子序列优化diff算法

• 优点
  性能提升

组合式API

• 优点
  1.采用hooks钩子函数复用代码解决了vue2的混合复用代码命名冲突问题
  2.hooks在大型项目能更好组织代码，提高可维护性和可复用性

css modules

vue3支持在style样式中使用css Modules模块化，如下例子

<template>
  <p :class="$style.red">This should be red</p>
</template>
<style module></style>

vue3指令修饰符优化

Teleport组件

Tree-shaking代码剪辑

Suspense组件

css 使用v-bind