renderjs使用
renderjs是一個運行在視圖層的js。它只支持app-vue和h5。
renderjs 不能使用 uni.$on和 uni.$emit 通信。
renderjs的主要作用有2個：
大幅降低邏輯層和視圖層的通訊損耗，提供高性能視圖交互能力
在視圖層操作dom，運行for web的js庫
使用時的注意事項
目前僅支持內聯使用。
不要直接引用大型類庫，推薦通過動態創建 script 方式引用。
可以使用 vue 組件的生命周期不可以使用 App、Page 的生命周期
視圖層和邏輯層通訊方式與 WXS 一致，另外可以通過 this.$ownerInstance 獲取當前組件的 ComponentDescriptor 實例。
觀測更新的數據在視圖層可以直接訪問到。
APP 端視圖層的頁面引用資源的路徑相對於根目錄計算，例如：./static/test.js。
APP 端可以使用 dom、bom API，不可直接訪問邏輯層數據，不可以使用 uni 相關接口（如：uni.request）
H5 端邏輯層和視圖層實際運行在同一個環境中，相當於使用 mixin 方式，可以直接訪問邏輯層數據。
renderjs與邏輯層通信示例
<template>
<view>
<text>renderjs區域</text>
<view @click="renderScript.emitData" :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">
</view>
<button @click="changeMsg" class="app-view">app-view</button>
</view>
</template>
<script>
export default {
data() {
return {
msg: ''
};
},
methods: {
// 觸發邏輯層出入renderjs數據改變
changeMsg() {
this.msg = 'hello renderjs' + Math.random() * 10;
},
// 接收renderjs發回的數據
receiveRenderData(val) {
console.log('receiveRenderData-->', val);
}
}
};
</script>
<script module="renderScript" lang="renderjs">
export default {
data() {
return {
name: 'render-vm'
}
},
mounted() {
const view = document.getElementById('renderjs-view')
const button = document.createElement('button')
button.innerText = '一個按鈕'
view.appendChild(button)
},
methods: {
// 接收邏輯層發送的數據
receiveMsg(newValue, oldValue, ownerVm, vm) {
console.log('newValue', newValue)
console.log('oldValue', oldValue)
console.log('ownerVm', ownerVm)
console.log('vm', vm)
},
// 發送數據到邏輯層
emitData(e, ownerVm) {
ownerVm.callMethod('receiveRenderData', this.name)
}
}
};
</script>
————————————————
版權聲明：本文為CSDN博主「辛巴德2018」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39217871/article/details/109623217