初探Vue3.0

发表于 | 分类于 |

一转眼 vue 已经到了3.0-rc.9了，在过去很长一段时间都处于一个高强度都工作状态，实在是没有机会跟上版本的脚步。也算是明白了为何中年人为什么不能保持学习的热情，跟不上技术的发展的部分原因。

vue3.0 解决了哪些问题

mixin 的问题

不同 mixin 中的方法、属性可能会相互冲突（命名空间冲突）；

mixin 非常多时，数据来源不够清晰；

HOC 的问题

需要在原来的组件上进行包裹或嵌套，将产生非常多的嵌套，不利于调试；

props 命名空间冲突（多个高阶组件的 props 冲突）；

props 数据来源不够清晰；

额外的组件实例消耗性能；

作用域插槽

没有命名冲突和数据来源不清晰的问题，但是创建了额外的组件；

typescript

自 2013 年正式发布，在 2016 年 9 月 angular2 以后就一路高歌猛进，我个人甚至认为 typescript 才是前端的主力。为什么这么说呢，事实上 IT 界有一句话早已说明了这一切：动态代码一时爽，代码重构火葬场。所有的动态语言在开发的时候都很舒服，但是如果一个项目要持续开发/维护 1 年以上就会显得异常费劲。更何况一个大型项目在生命周期动则 5-10 年，甚至更长，在很多时候我个人认为代码的可维护性甚至比开发效率、运行效率都重要。

在 vue2.x 都时候好几个小项目都是使用 ts 进行开发的，也踩了不少的坑，体验也不友好，应该说 react + ts 的开发体验真是太棒了。虽然 vue3.0 对 ts 的支持增强了不少，在模板绑定的时候也有很大的问题，angular 也一样，毕竟让 ts 去支持 html 模板确实也不太现实。不过总比 vue2.0 时代好了不少了。

快速上手

这一部分直接参考官方文档，简单清晰。下面只是部分 api 的简单说明（官方文档也是有的）。

setup

是使用 Composition API 的入口；

在声明周期 beforeCreate 事件之前被调用；

接收 props 对象作为第一个参数，接收来的 props 对象，可以通过 watchEffect 监视其变化;

接受 context 对象作为第二个参数，这个对象包含 attrs，slots，emit 三个属性。

可以返回一个对象，这个对象的属性被合并到渲染上下文，并可以在模板中直接使用；

可以返回一个渲染函数，如：

1
return () => h("div", [count.value, object.foo]);

teleport

teleport(传送) 组件：属性为 to=”test” , 然后平级组件内容中使用 id=”test” 来显示 。 主要用来解决有些组件层级问题

h(render 函数)

用 render 来自定义模板发生了少许改变 h() 需要通过 import 引进来才可用如：

1
2
3
4
5
import {defindComponent,h} form 'vue'

export default defindComponet({
    render(){ return h('div')  }
})

reactive 和 ref

reactive(): 转换响应式对象

ref(): 转换原始类型为响应式对象

两者的区别 reactive 代理初始化一个对象，ref 只是一个 .value 值，在函数中使用都要一直使用 .value 引着

移除$on、$emit 、$once、$off 方法，使用 mitt 方案

1
2
3
4
import mitt from "mitt";

mitt.on(event, callback);
mitt.emit(event, value);

[越努力，越幸运！]