Vue3.0改变,新功能----尤雨溪分享会
尤雨溪讲解vue3.0新特性学习笔记
-
1.3.0新特性一览:
-
a.以es5为基础,更小更快
-
b.支持TS,3.0的源码使用TS编写
-
c.提高自己的可维护性
更小:tree-shaking
实现类似babel一样的能力,vue从之前的10KB变为2~3KB,即不用打包不到的功能
更快:Proxy重构vitulal DOM功能,
利用proxy与Object.defineProperty()这个api类似的功能做数据的监听和双向绑定,
尤大的原话是’‘Proxy的结构更加成熟,而由于JS引擎本身决定,对象结构越稳定,性能越好’’,
Proxy更好的依赖追踪,甚至是以前做不到的数组的追踪
Proxy的弊端在于不支持ie11以下的浏览器*备注1
`3.0 vitual DOM的性能瓶颈的突破和优化实------动静结合
2.0下的虚拟DOM有个性能的问题,内存性能与模板的大小正相关,而与节点数量无关,这是由于1个动态节点和100个动态节点一样都是都是在模板中依靠同样的遍历所得到的,这就是遍历的所有节点的弊端
尤大的思路是"把所有的动态节点拉成一个Block,更新时候只要遍历动态节点,不遍历所有节点"
性能提高至少1倍,如果是模板越大,动态节点越少,性能越高,原则上来说无上限提高
TS源码
使得后期更好的维护,而且不会无TS不影响.
3.0 Function-based API替代传统的Class API,摒弃高阶组件
优势:
复用简单,把要复用的逻辑抽取到函数中,
如果不使用就不用压缩打包(更小)
解决高阶组件的弊端(性能消耗,反复使用)备注2*
不在需要2.0 Mixin的复用逻辑(解决命名冲突)备注3*
实现的方式:
Function API主要是通过简洁的命名规则,把逻辑做成键值对的形式,对于需要用到的方法,我们只需要解构就好了,这样的结构更加清晰.
也就说有了FunctionAPI,我们以后就不需要再用高阶组件,这种看着好用,其实浪费性能的方式
备注1:尤大设计vue的初衷就是不支持ie浏览器,他觉得迟早要淘汰的东西考虑它干嘛,然而ie11还没死就没法子了,国内之前有团队使用支持ie的框架,费劲.
备注2:高阶组件的实质就是一个组件中返回另一个组件,高阶组件的弊端一个是命名时候存在冲突,使用诸如命令时候,和Mixin一样存在命名冲突,多用的高阶组件例如Mixin(组件1(组件2))一旦更新其中一个就会导致全部更新,也就是说西能差了3倍到4倍
备注3:vue2.0多组件复用逻辑用Mixin,但是一旦注入逻辑的时候,由于命名的原因常常不知道是谁注入进来的
补充尤大的回答
Q1:尤大自己会不会考虑做一个专门给vue用的UI框架
A:不–会,因为没有时间
Q2:javaScript这种语言会不会被国外大厂用其他的语言取代
A:大厂没有这个能力,他们说了不算,实际上这是各个浏览器决定的,如果强行要改JS还要融入到其他的浏览器中,实际上这就是变相的做成一种语法糖了.
Q3:有没有考虑过用vue取代React
尤大的意思是不会,原因忘记了
PS.代码后续补充上来,包括vue和各家的对比