Vue3一些学习心得

Akko
1,576 阅读3分钟

why Vue3?

很多同事都提到Vue3望而却步,一听到新语言就怕了,其实新技术其实给我们带来的契机,意味着掌握可以提前下班(不是),而我却很欣喜若狂,因为特别好用的东西

  • setup,
  • CompositionAPI,
  • 更聪明的Render函数,
  • TreeShaking动态build依赖
  • Vite的适配(尤大推荐)
  • Volar的Pug模板,分离,setup,lang提示(尤大推荐)
  • TypeScript

我自己在使用vue2的过程中,经常this any满天飞,比如在配置中不能用箭头函数,在setTimeout中又不能使用普通函数,这就造成很多困惑,而且我需要随时关注this

Vite+ TypeScript

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 有变化的时候才会执行

avatar
文章
阅读
粉丝