javascript - Vue 组件和原生代码之间的通信

Question

我构建了一个应用程序来显示连接图，我发现使用 Vue.js 开发一些功能很有用。

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

这在我的范围内是不可接受的。

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

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

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

我可以直接在内部调用组件，用 smtgvue.$data让我的图表做出反应吗？

你能举一个简单的例子来展示如何访问methods, props,events在 vue 组件内部使用吗？

下面是一个小测试（使用 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>