vue3 知识点

vue 3

  • 设计目标

    • 更小
      • 使用了treeshaking 技术 可以把没有使用不必要的包给剔除
    • 更快
      • 更快的diff算法,通过添加没有变动的节点静态标记,下次发生变化的时候直接找该地方进行比较
      • 对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用
      • 事件监听缓存 绑定事件行为会被视为动态绑定,所以每次都会去追踪它的变化,开启事件静态缓存,没有了静态标记。也就是说下次diff算法的时候直接使用
  • SSR优化

    • 当静态内容大到一定量级时候,会用createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染
    • 更友好
      • vue3在兼顾vue2的options API的同时还推出了composition API,大大增加了代码的逻辑组织和代码复用能力
  • 为什么用proxy 替代defineProperty

    • proxy
      • 检测不到对象属性的添加和删除
        数组API方法无法监听到
        需要对每个属性进行遍历监听,如果嵌套对象,需要深层监听,造成性能问题
    • Proxy直接可以劫持整个对象,并返回一个新对象,我们可以只操作新的对象达到响应式目的
    • Proxy可以直接监听数组的变化
  • vue treeshaking 特性

    • Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination

    • 简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码

posted @   webzom  阅读(24)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示