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