扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容主要讲解“vue3中的custom renderer特性有什么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3中的custom renderer特性有什么用”吧!
为企业提供做网站、成都做网站、网站优化、成都全网营销、竞价托管、品牌运营等营销获客服务。创新互联拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！
在vue3中允许用户自定义目标渲染平台，以往的版本中目标渲染被局限于浏览器dom平台，而现在可以把 vue 的开发模型扩展到其他平台。点击进入官网
Tips:以往解决把 vue 的开发模型扩展到其他平台(Canvas、iOS、Android等等)的方式之一是借助第三方工具例如WEEX(点击进入官网)
我们先来弄懂vue是如何定义默认的目标渲染平台的，也就是说如何将目标渲染到浏览器dom平台上。可以先参考官方图：
我们先构建起一个初始化的vue3新项目，来一步步分析vue是怎么默认的将目标渲染到浏览器dom平台上，下面是项目中入口文件main.js的代码
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')最后在来看一下'./APP.vue'的代码：
我是根组件实例
写这两个文件后我们一运行命令npm run serve，会发现我们写在'./APP.vue'的template已经被渲染到浏览器dom平台上成为了真实的dom元素了，如下图：
我们应该要发出疑惑，写在'./APP.vue'的template是怎么被渲染到浏览器dom平台上又被转换成真实的dom元素呢?如果让我们自己来做得怎么做到呢？我们可以在入口文件main.js中找到关键线索：
import App from './App.vue' //我们可以打印出App来查看一下 console.log(App)
我们先打印出App查看一下，这是一个什么信息？如下图：
在打印出来的App对象里，我们并没有在该对象上找到template属性！我们不禁发出更大的问号，没有了template的信息要怎么做到被转换成真实的dom元素？？？答案是依靠该对象上的render函数，可以理解为template经过了vue的特殊加工转换为了render函数，并且这个render函数会依照template的有用信息返回一个虚拟DOM(Vnode)
我们可以借助工具来验证，如下图:
如上图，我们可以明确的看到template经过了vue的特殊加工转换为了render函数，并且这个render函数会依照template的有用信息返回一个虚拟DOM(Vnode)，关于虚拟DOM的描述可以参考官网点击进入官网
我们在发现了这个线索之后，我们可以手动调用App对象下的render函数，来查看一下返回的虚拟DOM到底长什么样子,代码和图片如下：
import App from './App.vue' console.log(App.render());
如上图，我们可以从返回的虚拟DOM中得到许多有用的信息，这里我用红色框出来的有用信息来简单实现一下如何渲染到浏览器dom平台上并且让其转换成真实的dom元素，代码如下：
//假设这个是虚拟Dom的信息
//仅仅是为了演示基本思想
const vnode={
type:'div',
children:'123'
}
const element=document.creatElement(vnode.type)
element.innerText=vnode.children
//告诉它的出口在哪里 要被渲染到哪里去
//这里的出口先假设为#app这个容器
document.querySelector('#app').appendChild(element)我们这一整套的逻辑图如下：
到了这一步我们也做到了如何将写在'./APP.vue'的template渲染到浏览器dom平台上并且转换成真实的dom元素(虽然写的代码很菜)，可是这一套逻辑vue已经帮我们实现了，我们现在再来看入口文件main.js的代码：
/*
//createApp的作用是将传入的组件转换为真实的Dom元素
//核心思想就是刚才写的
//const element=document.creatElement(vnode.type)
//element.innerText=vnode.children
*/
import { createApp } from 'vue'
import App from './App.vue'
/*
//mount的作用是告诉它的出口在哪里、要被渲染到哪里去
//核心思想就是刚才写的
//document.querySelector('#app').appendChild(element)
*/
createApp(App).mount('#app')我们在实现自定义的目标渲染平台之前，还得在温习一遍默认的目标渲染平台的流程逻辑图，如下图：
我们知道canvas也是一个平台，这里就以如何使用vue3渲染到canvas平台上来举例说明。我们先来看成果图：
我们即将要实现使用vue3的新特性custom renderer来将目标元素渲染到canvas平台上，我们现在实现的逻辑图如下：(注意分支)
在实现之前，我们必须得先学会几个简单的关于canvas的api。为了快速上手，在这里我使用了pixi.js第三方工具(点击进入官网)，pixi.js是基于canvas 的游戏渲染引擎库，借助pixi.js可以省去繁琐的操纵canvas的流程，让我们专心于感受vue3的新特性custom renderer的魅力。
下面是使用pixi.js创建canvas并往canvas内添加各种东西的流程图：(最终为了可以直观的看到效果，将canvas呈现在浏览器上(**插入到dom**))
在vue3的项目使用安装npm i pixi.js后，我们来看一下简单的关于canvas的使用方式，代码和简图如下：
import {
//初始化
Application,
//创建矩形
Graphics,
//创建图片
Sprite,
//创建文字
Texture,
Text,
TextStyle,
//创建容器
Container,
} from "pixi.js";
/*
通过 new Application来初始化创建canvas
options规定创建的canvas的宽和高
*/
const game = new Application({
width: 500,
height: 500,
});
/*
为了可以直观的看到效果
将canvas呈现在浏览器上(**插入到dom**)
game.view是canvas视图元素
*/
document.body.append(game.view);
/*
创建一个矩形
rect.x和rect.y是设置矩形的初始位置偏移量
//单独(独自)添加矩形到canvas容器上使用下一行命令
game.stage.addChild(rect);
*/
const rect = new Graphics();
rect.beginFill(0xffff00);
rect.drawRect(0, 0, 50, 50);
rect.endFill();
rect.x = 50;
rect.y = 50;
/*
创建图片
//单独(独自)添加矩形到canvas容器上使用下一行命令
game.stage.addChild(img);
*/
import logo from "./assets/logo.png";
const img = new Sprite();
//指定后才允许给图片添加点击事件
img.interactive = true;
//指定图片的src路径
img.texture = Texture.from(logo);
//添加帧循环 会一直执行handleTicker事件直至删除该帧循环
game.ticker.add(handleTicker);
//handleTicker事件 令图片的x偏移量不断增加
const handleTicker = () => {img.x++};
/*
pixi的点击事件名
必须配合img.interactive = true才能允许被点击
*/
img.on("pointertap", () => {
game.ticker.remove(handleTicker);
});
/*
创建文本
//单独(独自)添加矩形到canvas容器上使用下一行命令
game.stage.addChild(text);
*/
const text = new Text("heihei");
text.style = new TextStyle({
fill: "red",
});
text.x = 380;
/*
创建容器
//容器中可以放图片、文字、矩形等等
//容器是一个大的整体
//将容器添加到canvas上的话
//容器中的内容也会一并被添加到canvas上
//即下一行代码
game.stage.addChild(box);
*/
const box = new Container();
box.addChild(text);
box.addChild(img);
//统一的移动它们的位置
box.x = 2
/*
如果你想要把你创建的东西渲染到canvas容器内的话
必须把东西通过game.stage.addChild的方式添加进去才能显示
*/
//单独添加以添加矩形为例
game.stage.addChild(rect);
//添加一个容器
//(容器中可以包含图片、文字等等也会被一并添加上canvas)
game.stage.addChild(box);我们现在借助pixi.js学会了对canvas的简单操纵，接下来我们就要使用vue3的custom renderer来将元素渲染到canvas平台上了。
我们在上一讲已经学会了借助pixi.js对canvas进行简单的操纵，并梳理了自定义渲染到canvas平台上的逻辑，让我们在回顾一下逻辑图，再开始着手使用vue3的新特性custom renderer：
我们接下来如何操作来完成这一套自定义逻辑呢？？有请我们今天的主角登场：custom renderer(点击进入官网)。
我们先来重写App.vue里的代码，参考如下：