• 技术文章 >web前端 >Vue.js

    深入浅析vue3中的custom renderer特性

    青灯夜游青灯夜游2021-07-20 10:27:43转载114
    本篇文章带大家一起来了解一下vue3的新特性custom renderer。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    【相关推荐:《vue.js教程》】

    默认的目标渲染平台

    import { createApp } from 'vue'
    import App from './App.vue'
    
    createApp(App).mount('#app')
    <template>
      <div>我是根组件实例</div>
    </template>
    
    
    <script>
    export default {
      name: 'App',
      components: {
      }
    }
    </script>

    2.png

    import App from './App.vue'
    //我们可以打印出App来查看一下
    console.log(App)

    3.png

    4.png

    import App from './App.vue'
    console.log(App.render());

    5.png

    //假设这个是虚拟Dom的信息
    //仅仅是为了演示基本思想
    const vnode={
      type:'div',
      children:'123'
    }
    
    
    const element=document.creatElement(vnode.type)
    element.innerText=vnode.children
    
    
    //告诉它的出口在哪里 要被渲染到哪里去
    //这里的出口先假设为#app这个容器
    document.querySelector('#app').appendChild(element)

    6.png

    /*
    //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')

    自定义的目标渲染平台

    7.png

    8.png

    9.png


    10.png

    11.png

    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);

    自定义渲染到canvas平台上

    12.png

    <template>
        <!-- 这里的circle和rect是自定义标签
        	 不是组件不是组件不是组件 -->
        <circle x="50" y="50"></circle>
    </template>
    
    
    <script>
    export default {
      name: 'App',
      components: {
      }
    }
    </script>
    /* 默认的渲染到浏览器dom平台上的代码
    
    import { createApp } from 'vue'
    import App from './App.vue'
    createApp(App).mount('#app')
    */
    
    
    /*自定义渲染到canvas平台上
    
    createRenderer就是告诉vue我要自定义渲染平台了
    自定义渲染器可以传入特定于平台的类型
    */
    
    import { createRenderer } from "vue";
    //我们不急着往createRenderer添加相关配置
    //我们先打印render查看这个到底是个什么
    const render=createRenderer({})
    console.log(render,'render');

    13.png

    import {createRenderer } from 'vue'
    import App from './App.vue'
    
    //自己要来写逻辑
    const render=createRenderer({})
    
    
    /*
    自己要来写逻辑  ---->  render下有createApp函数
    调用createApp()方法后
    返回的对象下依旧是有mount()方法的
    */
    render.createApp(这里要填什么).mount(这里又要填什么)

    14.png

    import { Application } from "pixi.js";
    
    //通过 new Application来初始化创建canvas
    const game = new Application({
      width: 750,
      height: 750,
    });
    
    // 为了可以直观的看到效果
    // 将canvas呈现在浏览器上(**插入到dom**)
    document.body.append(game.view);
    
    /*
    导出canvas容器供
    render.createApp(这里要填什么).mount(getRootContainer())
    使用
    */
    export function getRootContainer() {
      return game.stage;
    }

    15.png

    import { createRenderer } from "vue";
    import { Graphics } from "pixi.js";
    
    
    const renderer = createRenderer({
      // 创建一个元素 --->  抽象的接口函数
      // vue执行时会调用这个函数中的逻辑
      createElement(type) {
        //参考vnode中的type 
        //因为我们书写了<circle></circle>
        //所以这里的type会有circle
        console.log(type);
        
        let element;
        //调用canvas api来创建矩形、圆形、图片等等
        //层级关系是后添加的在上面
        switch (type) {
          case "rect":
            element = new Graphics();
            element.beginFill(0xff0000);
            element.drawRect(0, 0, 500, 500);
            element.endFill();
            break;
          case "circle":
            element = new Graphics();
            element.beginFill(0xffff00);
            //第三个参数是圆的半径
            element.drawCircle(0, 0, 50);
            element.endFill();
            break;
        }
        
        //最终一定要返回element否则下方的函数接收不到
        return element;
      },
      patchProp(el, key, prevValue, nextValue) {
        
        /*
        向<circle x="50" y="50"></circle>中
        传递的props能在这里获取到
        利用这点可以去改变canvas容器中具体东西的行为
        比如改变位置、添加点击事件、等等
        如果传递的是响应式数据的话
        当响应式数据变更时canvas上的具体东西也会实时响应更新
        比如实时响应移动改变位置等等
        
        
        console.log(el,'可以得到该对象');
        console.log(key,'可以得到x和y');
        console.log(nextValue,'可以得到50');
        */
        switch (key) {
          case "x":
            el.x = nextValue;
            break;
          case "y":
            el.y = nextValue;
            break;
          default:
            break;
        }
      },
      // 插入到对应的容器内
      insert(el, parent) {
        console.log(el, parent);
        /*
        el是上面的createElement函数中返回的element
    
        parent是render.createApp(App).mount(getRootContainer())中
        getRootContainer()的返回值即canvas容器game.stage;
    
        在该函数中把创建的东西(矩形、图形、圆形等等)添加到canvas容器内
        即game.stage.addChild(element);
        */
        parent.addChild(el);
      },
    });
    
    
    /*
    因为vue中自己暴露了默认可以渲染到dom平台上的createApp方法
    我们模仿这个行为也暴露一个自己封装好的渲染到canvas平台上的createApp方法
    
    只需要通过以下四行代码就可以开始使用了
    import {createApp} from './runtime-canvas/index';
    import App from './App.vue';
    import {getRootContainer} from './game/index';
    createApp(App).mount(getRootContainer());
    */
    
    export function createApp(rootComponent) {
      return renderer.createApp(rootComponent);
    }

    小案例

    16.gif

    17.png

    18.png

    //封装自定义渲染到canvas平台上的逻辑
    import { createApp } from "./runtime-canvas";
    import App from "./App.vue";
    //初始化canvas的容器
    import { getRootContainer } from "./game";
    createApp(App).mount(getRootContainer());
    import { Application } from "pixi.js";
    
    const game = new Application({
      width: 750,
      height: 750,
    });
    
    document.body.append(game.view);
    
    export function getRootContainer() {
      return game.stage;
    }
    
    export function getGame() {
      return game
    }
    import { createRenderer } from "vue";
    import { Graphics } from "pixi.js";
    const renderer = createRenderer({
      createElement(type) {
        let element;
        switch (type) {
          case "rect":
            element = new Graphics();
            element.beginFill(0xff0000);
            element.drawRect(0, 0, 500, 500);
            element.endFill();
            break;
          case "circle":
          //创建球形
            element = new Graphics();
            element.beginFill(0xffff00);
            element.drawCircle(0, 0, 50);
            element.endFill();
            break;
        }
        return element;
      },
      patchProp(el, key, prevValue, nextValue) {
        switch (key) {
        //根据传递的props初始化‘具体东西元素’的位置
        //如果props是响应式数据那么在该响应式数据改变时
        //会被这里拦截到并实时响应更新视图位置
          case "x":
            el.x = nextValue;
            break;
          case "y":
            el.y = nextValue;
            break;
          default:
            break;
        }
      },
      insert(el, parent) {
        console.log(el, parent);
        //添加到canvas容器内
        parent.addChild(el);
      },
    });
    
    export function createApp(rootComponent) {
      return renderer.createApp(rootComponent);
    }
    <template>
      <circle></circle>
    </template>
    
    
    <script>
    export default {
    };
    </script>
    
    <style></style>
    <template>
    
        <Circle :x="x" :y="y" ref="circle"></Circle>
        
    </template>
    
    <script>
    import Circle from "./components/Circle";
    import {getGame} from './game/index';
    import {ref,onMounted, onUnmounted} from 'vue';
    export default {
      name: "App",
      components: {
        Circle,
      },
    
      setup() {
        let x=ref('50')
        let y=ref('50')
    
    
        const game=getGame()
        
        onMounted(()=>{
          // console.log(circle,'circle');
          // console.log(game,'game');
          // console.log(circle.value.$el,'xx');
          
          
          game.ticker.add(handleTicker);
    
        });
    
        const handleTicker = function(){
          // console.log(circle.value.$el);
          circle.value.$el.x+=10
          if(circle.value.$el.x>700){
            game.ticker.remove(handleTicker);
            game.ticker.add(handleTicker2);
          }
        }
    
        const handleTicker2 = function(){
          // console.log(circle.value.$el);
          circle.value.$el.x-=10
          if(circle.value.$el.x<50){
            game.ticker.remove(handleTicker2)
            game.ticker.add(handleTicker);
          }
        };
    
    
        // console.log(circle,'circle');
    
        let circle=ref(null)
    
    
        onUnmounted(() => {
          game.ticker.remove(handleTicker)
          game.ticker.remove(handleTicker2)
        })
    
    
        return{
          circle,
          handleTicker,
          x,
          y
        }
      }
    }
    </script>
    
    <style>
    </style>

    原文地址:https://juejin.cn/post/6910470057961193480

    作者:林子酱

    更多编程相关知识,请访问:编程视频!!

    以上就是深入浅析vue3中的custom renderer特性的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金--林子酱,如有侵犯,请联系admin@php.cn删除
    上一篇:$nextTick VS setTimeout,看看它们的差异 下一篇:vue如何动态增加css
    VIP会员

    相关文章推荐

    • 利用v-viewer结合vue 预览相册• 关于vue-cli4+laravel8使用JWT登录及token验证• Vue如何进行事件处理?相关基础知识介绍• 宝塔部署vue项目时,访问首页正常,但其他页面无法访问404的解决办法• 介绍laravel+vue前后端分离之服务器端配置

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网