27｜自定义渲染器：如何实现Vue的跨端渲染 ？
大圣
该思维导图由 AI 生成，仅供参考
你好，我是大圣。
上一讲我们讲完了组件库的核心知识点，这一讲我们来学习一个叫 Vue 3 的进阶知识点：自定义渲染器，这个功能可以自定义 Vue 渲染的逻辑。
在给你讲清楚原理之后，我还会带你一起实现一个 Canvas 的渲染器实际上手体验一下。
什么是渲染器
我们都知道，Vue 内部的组件是以虚拟 dom 形式存在的。下面的代码就是一个很常见的虚拟 Dom，用对象的方式去描述一个项目。相比 dom 标签相比，这种形式可以让整个 Vue 项目脱离浏览器的限制，更方便地实现 Vuejs 的跨端。
渲染器是围绕虚拟 Dom 存在的。在浏览器中，我们把虚拟 Dom 渲染成真实的 Dom 对象，Vue 源码内部把一个框架里所有和平台相关的操作，抽离成了独立的方法。所以，我们只需要实现下面这些方法，就可以实现 Vue 3 在一个平台的渲染。
首先用 createElement 创建标签，还有用 createText 创建文本。创建之后就需要用 insert 新增元素，通过 remove 删除元素，通过 setText 更新文本和 patchProps 修改属性。然后再实现 parentNode、nextSibling 等方法实现节点的查找关系。完成这些工作，理论上就可以在一个平台内实现一个应用了。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Vue 3的自定义渲染器功能为跨端渲染提供了可能，使得Vue项目能够脱离浏览器的限制，更方便地实现跨端应用。通过实现一系列操作方法，如createElement、insert、remove等，开发者可以在特定平台实现Vue 3的渲染。这一功能为开发者提供了更大的灵活性和可扩展性，使得Vue在不同平台上的应用更加便捷和高效。文章中还介绍了如何基于Vue 3的runtime-core包封装其他平台的渲染器，让其他平台也能使用Vue内部的响应式和组件化等优秀的特性。同时，文章还展示了如何通过自定义渲染器实现Canvas和three.js的渲染，以及如何在Vue组件中使用ref等响应式的写法。这些示例展示了Vue 3的自定义渲染器功能的强大潜力，为读者提供了丰富的实践参考和灵感。 总结：Vue 3的自定义渲染器功能为跨端渲染提供了可能，使得开发者能够在特定平台实现Vue 3的渲染，提供了更大的灵活性和可扩展性。文章还介绍了如何基于Vue 3的runtime-core包封装其他平台的渲染器，以及如何通过自定义渲染器实现Canvas和three.js的渲染，展示了Vue 3的自定义渲染器功能的强大潜力。 思考题：Vue如何在node环境中渲染呢？
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(13)
- 最新
- 精选
无双想深入了解一下three.js和vue的结合，有没有这方面的资料，或者最佳实践？作者回复: 可以看下这个库 https://github.com/troisjs/trois
2021-12-223
海阔天空有很多都不是很懂。。。编辑回复: 哪里不懂留言讨论啊～
2021-12-221
ll
开眼界的一课。平时工作中涉及相关内容较少，所以这部分的内容还需课下多练几遍。 结合之前所学，写几点感想，首先有以下几种“过程”; 1. html --> dom --> 浏览器 2. html --> v-dom --> dom --> 浏览器 3. svg, canvas, webgl --> v-dom --> dom --> 浏览器 4. html等 --> v-dom --> dom --> "web内核" --> 其他平台 5. html等 --> v-dom --> "xxx object model" --> 其他平台 然后， vue 的角色是提供了操作 v-dom 的“方式”，并且在 v-dom --> dom 这个过程中，非常"高效"且"专业", 今天的内容聚焦过程 4. 的前半段，即 html等 --> v-dom. 为什么？或者解决了什么问题？ 答: 我们操作 v-dom 的方式不会因需要”适配“不同的"标准"而发生”任何“改变。 怎么实现的？svg，canvas 等怎么变成“统一”的 v-dom，需要什么？vue 也给你提供了 createRenderer。 “适配器"出场了，在代码抽象实现上来说就是“适配器模式”。我开始看文章时猜的是“策略模式”，当然我学艺不精，这也是个复习“设计模式”的好机会。 至于思考题，Vue 在 在 node 环境中渲染我能想到的应用场景，是前后端同构，SSR，SSG，产生这个问题的根本原因就是，node 它不懂 “dom", 不懂怎么办？配个翻译？要不你翻译成它能懂的再给它？ 已上，就是我的一些大致想法，谬误之处还望大家不吝赐教。2021-12-22213
Johnson这一讲的跨端原理讲解太实用啦！😁2021-12-225
Sean源码地址：https://github.com/shengxinjing/vue3-vs-vue2.git2022-04-151- Sean老师 这没有代码 可以运行一下吗2022-04-151
乐多老师，这一讲的源码哪里有？2022-04-131
迷路森林我的renderer.js文件一直渲染不出来，请问是要安装什么依赖包吗2022-09-04归属地：四川
Chaos浩还是这种内容更吸引人2022-09-01归属地：浙江
东方奇骥好文！最近工作中正要自定义stater，没想道就找到了。2022-07-24
收起评论