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等。