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传值: