太多人把掌握一个工具软件的操作等同于掌握某个领域需要的专业能力。
如果你提供的数据图表能让人做出更有效的决策,那么我觉得它就是一个成功的图表,否则它仅仅是一个看起来很酷很美的东西,除了浪费大家的制作时间,并没有带来什么本质的改变。
前段时间看到vue更新到了3.0版本,于是用3.0的vue起了一个项目,感受一下新的api。
最直观的感受是新的API createApp()和新的组合式API setup()。
以往我们创建新的项目一般直接使用new Vue(),创建子应用也需要自己去实现对应的加载逻辑,但是现在可以直接使用createApp()创建相应的子项目,同时它本身也带有自己的挂载和卸载方法。
以往我们直接在methods中写业务逻辑方法。现在直接可以在setup()中利用相应的钩子函数就可以实现想要的功能,尤其是业务逻辑比较复杂的情况下,可以相应的简化一些代码。
setup(props, context) {
const router = useRouter()
const {proxy} = getCurrentInstance()
let form = reactive({
username:"",
password:''
})
let isReg = ref(false)
// login
const loginFn = async ()=> {
console.log('form---',form)
const {data,code} = await login(form)
const res = await login(form)
// console.log('res---',res)
if(code === 0){
console.log('data----',data)
router.push({
name:'home'
})
}
}
// reg
const goReg =()=>{
proxy.isReg = !proxy.isReg
}
const regFn = async() => {
const {data,code} = await regist(form)
if(code === 0){
console.log('data---regFn---',data)
}
}
return {
checkNick: false,
formItemLayout,
formTailLayout,
form,
isReg,
goReg,
loginFn,
regFn
};
},
最近也看了react更新了v18的版本。
主包中增加了几个新的钩子函数:
同时react-dom分成了React DOM Client 和 React DOM Server。
react-dom/client提供了createRoot 和 hydrateRoot方法。createRoot 方法用来创建新的应用,并且提供了render和unmount方法。
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(
document.getElementById("root")
);
root.render(
<HashRouter>
<App />
</HashRouter>
)
React DOM Server是服务端渲染相关的内容,我们平时写的不多就不多说了。
其他的比较重要的变化:
其他的变化包括:
说了这么多,都是在说react更新的内容。其实我们仔细思考一下,会发现vue 和 react 越来越像。同样的createApp 和 createRoot , 同样的useState 和reactive ,以及相关的useRouter 等钩子函数。
前几年比较火的前端微服务的概念,通常是基于路由,或着基于iframe,或者基于nginx配置进行实现。有了这些API,未来的前端微服务更多的会采用组件化的形式,通过div的id标识进行加载和卸载。
当然,现在就有一些微服务项目是通过div进行加载,但是这种实现形式比较麻烦,需要把子项目打包成静态资源,然后通过script的形式引入到主项目中。而组件化就显得更加方便,快捷,高效,同时也更加灵活。
抛开前端架构中的代码规范,工作流,持续集成,基于我们对业务细节非常熟练的前提,在不影响开发进度的前提下,将现有的复杂业务用微件化的概念进行重构,未来会是一个不错的选择。
本文分享自 JavaScript高级程序设计 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!