Vue3.0新特性

更快
优化点 2.x实现 3.0实现
模板编译v-dom 运行时判断是组件/原生元素 编译时判断类型生成相关代码
模板中子元素的类型 多重判断 编译时留下hint给运行时提示,只有一个子元素那么算法可以直接免去不必要的判断
slot 父子组件关联更新 类似slot-scope生成lazy函数,由子组件来控制slot,精确依赖收集,避免不必要的组件渲染
静态内容提取 检测到静态模板提取出来,复用virtual-dom跳过比对 部分静态资源提取,提取静态属性对象,比对动态children
内联函数提取 每次父组件重渲染会生成新函数,导致子组件重渲染 将这类函数cache后复用,避免组件无谓更新
数据监听系统 object.defineProperty proxy全语言特性支持:对象属性的增删,数组的index和length;lazy by default只监听使用到的数据;data computed props代理改成proxy包装,在调用时进行判断,加快的实例初始化
对开发人员 - renderTriggered事件,允许人们查看触发更新的内容
更小
  • 通过ES Module import实现按需引入,内置函数如keep-alive,transition;指令运行时如v-model;v-for;工具函数mixin,async component等
更易于维护
  • ts代码重构
多端渲染支持
  • custom render api
  • 引入vue运行时代码 与dom无关,将抛出节点操作,和将虚拟dom渲染到原生

composition api

学习:http://caibaojian.com/vue3-composition-api-2.html
原有的vue2.0存在组件可读性差,mixin和slot复用都有问题,ts支持不好等问题,所以引入了composition api来解决,从options api配置选项,逻辑混乱的写法转向高内聚、低耦合的函数式编程,以setup为入口,通过reactive、ref赋予数据响应化,其中ref保证了基本对象的响应,reactiv主要用于处理引用对象的响应,可以通过toRefs方法转化;内部可以使用computed计算属性和watchEffect监听器,onBeforeMount和onMounted等生命周期函数;最终通过return返回想要在模板中使用的内容;setup函数伴随着beforeCreate和created函数的执行,其他的生命周期通过在前面添加on进行引用。

你可能感兴趣的:(Vue3.0新特性)