uniapp中renderjs的使用

uni-app的app端逻辑层和视图层是分离的，这种机制有很多好处，但也有一个副作用是在造成了两层之间通信阻塞。renderjs是一个运行在视图层的js。它只支持app-vue和web。
renderjs的主要作用有2个：
1.大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
2.在视图层操作dom，运行 for web 的 js库

<template>
  <view>
    <u-button @click="myMap.emitData" size="mini">按钮</u-button>
    <!-- myMap为renderjs中的名字 -->
    <view id="myMap" :info="info" :change:info="myMap.receiveInfo"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 用于桥接的数据
      info: '一开始的消息',
    };
  },
  mounted() {
    setTimeout(() => {
      this.info = '变化的消息';
    }, 1000);
  },
  methods: {
    // renderjs发送过来的数据
    receiveRenderData(val) {
      console.log('renderjs返回的值-->', val);
    },
  },
};
</script>
<style lang="scss">
#myMap {
  width: 100%;
  height: 100vh;
}
</style>

<script module="myMap" lang="renderjs">
export default {
	data() {
		return {
			map: null,
      		linePath: [],
      	}
	},
	mounted() {
	},
	methods: {
     	// 发送数据到逻辑层
    	emitData(e, ownerVm) {
      		console.log(e);
      		ownerVm.callMethod('receiveRenderData', this.linePath)
    	},
    	// 接收逻辑层发送的数据
       receiveInfo(newValue, oldValue){
      	   console.log(newValue, oldValue);
       },
   }
}
</script>

1.vue向renderjs传值：

2.renderjs向vue传值：

更多详情