why Vue3?
很多同事都提到Vue3
望而却步,一听到新语言就怕了,其实新技术
其实给我们带来的契机,意味着掌握可以提前下班(不是),而我却很欣喜若狂,因为特别好用的东西
setup
,CompositionAPI
,- 更聪明的
Render
函数, TreeShaking
动态build
依赖Vite
的适配(尤大推荐)Volar
的Pug
模板,分离,setup
,lang
提示(尤大推荐)TypeScript
我自己在使用vue2的过程中,经常
this
any
满天飞,比如在配置中不能用箭头函数,在setTimeout
中又不能使用普通函数,这就造成很多困惑,而且我需要随时关注this
Vite+ TypeScript
vite
多快,我在上一篇文章中也说到他到底为什么快?- 请移步 # Vite 为什么这么快? 为什么我推荐使用 vite
- 关于
TypeScript
,类型注解和InterFace
在协作的时候可以避免很多不规范,我也正在学习
Composition API
把更多响应式的逻辑组合能力暴露给了用户。
Fragment
,Teleport
Suspense
,框架尺寸上利用tree-shaking
,当一些功能不用的时候,打包时就不会打包到最终的代码里。
因为同时有模板编译以及Runtime
, 比如说响应式系统是完全独立的包,和平台无关的渲染逻辑会暴露一个定制的自定义渲染这个api
关于双向数据绑定
关于性能 把很多东西暴露在了 this
身上,都是用Object.defineProperty
定义的 ,这个操作其实挺费时间
vue3
基于proxy
可以把 属性定义的这个过程给直接丢掉,直接暴露给Render
函数 从Proxy
拿东西的时候 动态的决定返回什么东西 之前定义的data
props
computed
这些东西 全都需要从this
上去暴露 现在就等于说 一个属性的get,我们proxy
拦截你,根据之前已经知道这个属性是个prop
还是个啥, 直接从prop
上返回给你
关于模板编译
另一方面 vue2
是把 virtual DOM 编译到了 渲染函数
,最大的性能浪费就是 不管你动态模板 还是静态模板都会 一竿子diff
下去
Vue3
就相当于在模板这块做了一个静态分析,生成一个比较聪明的render
函数,把能提升的hoist
全部提升到渲染函数外面
- 这样在每一次更新的时候 不用再重新创建一遍节点,就可以利用
vif
vfor
把节点切分成更粗的块, - 这样的话就可以直接把动态的 部分 存在一个单独的数组里面 就行了.
vue3
的模板和静态模板的尺寸就可以i完全解耦了
compositionAPI 还有什么?
reactive
vue2
是通过 Vue.observable
是和Vue3
的reactive
做的事情是一样的
watchEffect
watch VS watchEffect
vue2
中可以去观测数据的依赖的变化,但是只能watch
一个字段,
3 里面暴露了一个新的API
叫 watchEffect
可以去做console.log()
这种事情等更多的事情
非对象怎么办?
ref
如果传的是非对象的数据 就得用ref
包装一下,使得可以被追踪 reactive watchEffect ref 其他都是组合使用而已
关于源码
这块我看过一丢丢,大概是 通过
依赖收集
, 这个effects
只有在count.num
有变化的时候才会执行