现在技术发展的太过迅速,一不学习就落后,前端也是如此。前端今年最要关注的就是 Vue3.0 的发布,现在已经进入了RC 阶段,很快就要发布 正式版 了。
性能方面
通过更新 runtime-core
与 runtime-dom
,支持了包括 Fragments
、Portals
与Suspense w/ async setup()
等(似乎有点越来越像 react
),支持 Composition API
、Options API
和 typings
,配合 Proxy
的引入,极大程度上提高了响应式的能力。
vue2
初始化,所有的数据都要走defineProperty
;vue3
用proxy
动态的决定返回什么,做了拦截,初始工作量减少,组件实例化速度的提升还是很明显的。
runtime-core
体积压缩成了约10kb
维护性
代码迁移成 TypeScript
(还没学的抓紧啦)
编译器Compiler
优化,以下借用尤大大的特性更新图翻译一下:
使用模块化架构 优化 "Block tree" 更激进的 static tree hoisting 功能 支持 Source map 内置标识符前缀(又名 "stripWith") 内置整齐打印功能
编译优化:template compile to render function
阶段可以借助vue-loader
在webpack
编译阶段离线完成 那么耗时更多的patch
阶段优化:通过编译阶段对静态模版的分析,编译生成Block Tree
,只把绑定数据的动态节点加入嵌套区块数据,每个区块以数组追踪
Composition API
尤大大说以前在2点几的版本中我们使用 mixin
来混入公用方法或者其它内容,这样做混入的对象来源不明,相同功能代码陈列杂乱,修改起来上翻下翻,对开发者造成困扰。
而使用 Composition API
,来源明确、相同功能的代码块在一起,修改的时候只需要专注一个地方,更易于维护。
以前我们在代码里都是使用 this
来访问属性,比如 this.foo() this.obj this.$watch
,这样 vue
对外暴露的东西太多,引入第三方组件安全问题无法保障,造成困扰。vue3
之后我们将不再使用 this
,api
以模块的方式引入,函数的方式使用。
CSS Modules
CSS Modules
是一种 CSS
的模块化和组合系统。vue-loader
集成 CSS Modules
,可以作为模拟 scoped CSS
的替代方案。
先在组件中的 <style>
上添加 module
特性:
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
在 <style>
上添加 module
后,一个叫做 $style
的计算属性就会被自动注入组件。
<template>
<div>
<p :class="$style.red">
hello red!
</p>
</div>
</template>
因为这是一个计算属性,所以也支持 :class
的对象/数组语法:
<template>
<div>
<p :class="{ [$style.red]: isRed }">
Am I red?
</p>
<p :class="[$style.red, $style.bold]">
Red and bold
</p>
</div>
</template>
也可以通过 JavaScript
访问:
<script>
export default {
created () {
console.log(this.$style.red)
}
}
</script>
SSR 服务端渲染
当开启SSR
了之后,如果我们模版中有一些静态标签,这些静态标签会被直接转化成文本。其中的动态绑定依然是一个单独的字符串内嵌进去。这个性能肯定比 React
转成 VDOM
在专为HTML快很多。
DevTools 对 Vue 3 的初始支持
devtool
已得到重大重构,可以更好地将其核心逻辑与支持的不同 Vue
版本分离。该界面还具有使用 Tailwind CSS
实现的新外观。当前,仅支持组件检查-但很快将有更多功能。
Devtools beta
已获得批准,现在可在 Chrome
网上应用店中使用(注意:devtools
需要 vue@^3.0.0-rc.1
)
未来工作
我们尚未完成对 RC
的完整 IE11
支持,因此我们将继续努力。
同时,我们的主要重点将转向文档,迁移和兼容性。我们当前的目标是为使用v3启动新项目提供清晰的文档,并帮助库作者升级其软件包以支持 v3
。文档团队将根据社区的反馈继续完善迁移指南和 v3
文档。
将不重要的应用程序从 v2
迁移到 v3
可能会慢得多。我们将提供代码模块和工具来帮助进行此类迁移,但是在大多数情况下,这将取决于项目依赖项可以多快地升级以支持 Vue3
。这对于评估升级的风险和时间投资是否很重要也很重要。值得-因为将继续支持 Vue 2
。我们计划在 3.0
发行后指定一个关注期,以通过兼容性插件将功能反向移植到 v2
中。我们已经在 @vue/composition-api
中看到了这种方法的成功。
❤️ 看完两件事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我两个小忙:
点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
关注公众号