木灵鱼儿

木灵鱼儿

阅读:174

最后更新:2022/08/17/ 1:35:25

vue3 createRenderer 自定义渲染器

vue3提供了createRenderer用于用户自定义控制渲染,这样的好处就是方便在不同平台之间的使用!

就拿weex来说,它是一个跨平台的移动端解决方案,除了能够一套代码适配多个系统之外,其实还承载热更新的能力,我们都知道web页面是动态的,代码上传后用户刷新页面就能拿到最新的效果,这个效果其实在原生app上是很难做到的。

而weex是阿里的产物,他们的业务需求非常需要动态更新的功能,就拿淘宝来说,一个店铺的装修,当然是希望装修完立马就能给用户呈现效果,当然用web网页就可以啊,但是web网页它没有app级的体验,这两个东西就好像鱼和熊掌一样,于是乎在两者兼具的路上折腾了很多,weex也只是其中的一个产物。

weex本身也是利用的vue做的封装,写一套vue的代码,就可以给web、安卓、ios平台去使用,但是由于每个平台最终的渲染方式不同,但又要有Native(原生app)级体验,纯web是做不到的,所以weex在fork了vue2的源码后,进行了很大的改动。

而vue3中createRenderer的提供,就可以避免像vue2那样只能改动源码实现多平台的使用,从而增加了灵活性。

如果我们需要使用,可以从vue中import引入该方法:

import { createRenderer } from '@vue/runtime-core'

const { render, createApp } = createRenderer({
  patchProp,
  insert,
  remove,
  createElement
  // ...
})

// `render` 是底层 API
// `createApp` 返回一个应用实例
export { render, createApp }

// 重新导出 Vue 的核心 API
export * from '@vue/runtime-core'

具体的代码可以去官网查看:createRenderer()

其实作为一个前端开发,其实并不太有机会用到这个东西,但是我们可以了解一下,作为视野的拓展,这个createRenderer甚至向大家明示了vue的dom渲染方式,有兴趣的可以研读下源码之类的。

课外知识

跨端框架的发展史

传统原生app开发

传统的开发都是 Native App,也就是原生开发,它的性能最好,用户体验也是最好,但是app开发和发布到软件市场成本都非常高,ios甚至还需要开发者支付费用来获取开发权限。

web应用

在浏览器运行的网站应用,一般泛指spa(Single Page Application)单页应用和mpa(Multi-page Application)多页应用,是一种基于网页技术开发实现特定功能的应用。

性能和用户体验相对较差,但是开发和发布都非常方便。

Hybrid App

混合模式移动应用,是介于web应用与原生应用的中间,常见的比如套壳包,虽然安装的是一个app应用,但是内在还是web,通过给web api进行扩展,来实现部分原生app的功能,由于web在各大设备上都有一定的支持度,所以混合模式app在跨端上,可以保持一致的用户体验。

React Native App

React Native App是Facebook开源的一套新的app开发方案,它更像是利用js来编写原生应用,这也是Facebook发现混合模式的缺陷也自行找到的一个方向,目前已经非常成熟了。

该框架也被称为“RN”;有时候会在一些程序员的文章中出现。

Weex App

weex是阿里在RN发布的后一年自己又重新设计了一番,是基于vue的一套开源跨端框架,后来捐给Apache 软件基金会孵化,能不能理解为弃子呢,老传统了,后来阿帕奇发起了它的退休计划,然后weex又回到阿里自己这边进行维护。

weex github仓库

不知道vue3之后,它会不会有大的改动,不然也只能慢慢销声匿迹了。

Flutter

来自谷歌出品,其实已经完全和前端没有关系了,但是它是用于跨端开发的一个框架,丢掉了web的性能瓶颈,有着自己的组件设计,渲染引擎,很强,也算是目前最好的跨端框架之一。

国产跨端框架

比如uni-app,国内的跨端框架大部分都有以上前辈的影子,就不多说了


在移动端上,基本就这么些框架,pc上则有gatsbyjs、electronjs、taro等。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 174

相关文章