美文网首页
vue3.0新特性学习笔记1(基本特性)

vue3.0新特性学习笔记1(基本特性)

作者: XKolento | 来源:发表于2021-05-18 16:29 被阅读0次
vue3.0的设计目标

更小
更快
加强TypeScript支持
加强API设计一致性
提高自身可维护性
开放更多底层功能

]######1.性能方面的优化

双向响应原理由Object.defineProperty改为基于ES6的Proxy,速度更快,且消除了之前存在的警告;
重写了 Vdom ,突破了 Vdom 的性能瓶颈
进行了模板编译的优化
进行了更加高效的组件初始化
vue3.0将 vdom 更新性能由与模版整体大小相关提升为与动态内容的数量相关

之前vue2中的 Object.defineProperty存在兼容性问题,所以只能兼容到ie8。

而且Object.defineProperty是一个相对比较昂贵的操作,因为它直接操作对象的属性,颗粒度比较小。将它替换为es6的Proxy,在目标对象之上架了一层拦截,代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作,颗粒度变大。

javascript引擎在解析的时候希望对象的结构越稳定越好,如果对象一直在变,可优化性降低,proxy不需要对原始对象做太多操作。

2.Tree-Shaking

缩小vue3的体积,将一些不需要的内容去除。只有需要的内容才会打入包中。
优化后的 Vue3.0 的打包体积只有原来的一半(13kb)。哪怕把所有的功能都引入进来也只有23kb,依然比 Vue2.x 更小。像 keep-alivetransition 甚至 v-for 等功能都可以按需引入。

3.Fragments

不再限制 template 只有一个根节点。
类似于react的空节点。

4.更好的typeScript支持
5.组合式api

1️⃣setup()
vue3.0将组件的逻辑都写在了函数内部,setup()会取代vue2.x的data()函数,返回一个对象,暴露给模板,而且只在初始化的时候调用一次,因为值可以被跟踪。

2️⃣新的函数api:const count = value(0)

详细内容见 vue3.0新特性笔记3

相关文章

  • vue3.0新特性学习笔记1(基本特性)

    vue3.0的设计目标 更小更快加强TypeScript支持加强API设计一致性提高自身可维护性开放更多底层功能 ...

  • Vue3.0 新特性

    Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0,这篇文章就是在使用后的一个总结, 包含...

  • vue3.0 新特性

    1.需要使用什么属性就在script标签内引入 2.全局引入 通过globalProperties将参数挂载在全局...

  • Java 8 新特性

    Java 8 新特性 声明:java8新特性系列为个人学习笔记,参考地址点击这里,侵删!! Java 8 (又称为...

  • vue3.0从入口文件main.js教你快速上手-01

    1.了解vue3.0新特性有哪几点? 1、向下兼容vue22、性能提升(打包大小减少了41%,初次渲染快了55%,...

  • vue3新特特性

    Vue3.0新特性 性能双向响应原理由Object.defineProperty改为基于ES6的Proxy,使其颗...

  • 【前端】Vue3.0 新特性

    速度方面: 通过更新 runtime-core 与 runtime-dom ,支持了包括 Fragments、Po...

  • Vue3.0 新特性探索

    Vue3官网文档[https://vue3js.cn/docs/zh/guide/introduction.htm...

  • vue3.0新特性teleport

    比如自己写个modal组件时,挂载到body上最好的选择,可以通过z-idnex来控制层级。但是又想在引用moda...

  • 学习笔记《php新特性》

    我以前用的最熟的PHP版本是php5.2,对php5.3的新增特性也略有了解,但是之后的就没有系统的学习过,今天发...

网友评论

      本文标题:vue3.0新特性学习笔记1(基本特性)

      本文链接:https://www.haomeiwen.com/subject/xpaejltx.html