在Vue组件和本机代码之间进行通信

问题描述

我构建了一个显示关联图的应用程序，发现使用Vue.js开发某些功能很有用。

出于测试目的，我尝试将一个最简单的图形包装在vue组件中，进行强制定向布局，但是帧速率显着下降（SVG中有600个节点，每个节点随机连接3个链接=>最小FPS 2.4最高FPS〜 9）。

这对我的范围来说是不可接受的。

我的目标是发信号通知用户何时将节点添加/删除到vue组件并向后添加，并且通常将图上的事件发信号通知给vue组件并向后添加。

基本上，我想将图形的呈现方式保留在本机代码中，为简单起见，可以在vue组件中使用数据结构和方法。但是我认为我不能这样做，因为vue找不到对应的UI。

我应该使用哪种方法在本机编码图和Vue组件之间进行通信？

我可以直接在内部调用组件，例如使用vue.$data的smtg来使图形做出反应吗？

您能否显示一个简单的示例来说明如何访问vue组件内部使用的methods，props，events？

下面进行一些测试（使用Vivagraph库）：

<template>
  <div>
    <div  id='graphContainer' ref="graphContainer"></div>
  </div>
</template>
<script>



    export default {
        data() {
            return {
              graph : Viva.Graph.graph(),graphics : Viva.Graph.View.svgGraphics()
            }
        },mounted() {

            // create an array,will make use of it later
            function range(start,stop,step) {
                if (typeof stop == 'undefined') {
                    // one param defined
                    stop = start;
                    start = 0;
                }

                if (typeof step == 'undefined') {
                    step = 1;
                }

                if ((step > 0 && start >= stop) || (step < 0 && start <= stop)) {
                    return [];
                }

                var result = [];
                for (var i = start; step > 0 ? i < stop : i > stop; i += step) {
                    result.push(i);
                }

                return result;
            };

            var randomNodes  = range(600);

            let v,u;
            for (var i = randomNodes.length - 1; i >= 0; i--) {
                v = randomNodes[i];


                for (var j = range(3).length - 1; j >= 0; j--) {
                    u = randomNodes[Math.floor(Math.random() * randomNodes.length)];

                    this.graph.addLink(v,u);
                }
                    
                this.graph.addNode(v);


            }
            

            
            
            this.renderer = Viva.Graph.View.renderer(this.graph,{
                graphics : this.graphics,container: this.$refs.graphContainer
            });

            this.renderer.run();
     
            //test
            window.graph = this.graph
        }
    }
</script>
<style lang="scss">
        
        svg,#graphContainer {
            width: 100%; 
            height: 100%;
        }


        
</style>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）