聊聊uni-app的renderjs-一一网

这是我参与更文挑战的第17天，活动详情查看：更文挑战

写作背景

刚刚到新公司，了解公司项目时：一款找房租房自研项目。技术栈是使用的uni-app开发APP及H5。

其中在开发部分功能时，例如下拉刷新，并没有用现成提供的，而是自己手写的，其中就用到了一个renderjs的东西。

华生我又发现了新盲点了。

于是抓紧研究了一波，毕竟以后靠这个吃饭呢。

renderjs是什么？

首先看看uni-app文档中对他的描述:

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。

renderjs的主要作用有2个：

1、大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力

2、在视图层操作dom，运行for web的js库

那么，这一块根据我的语文水平来理解了一下，并且简单粗暴的总结一下：

就是vue本身不支持直接通过原生JS操作DOM，于是在uniapp里，可以通过renderjs来实现逻辑层(vue的template或者说虚拟dom)与视图层(原生dom)之间的通讯，或者说操作。

使用时的注意事项

1、目前仅支持内联使用。

2、不要直接引用大型类库，推荐通过动态创建 script 方式引用。

3、可以使用 vue 组件的生命周期不可以使用 App、Page 的生命周期

4、视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance获取当前组件的 ComponentDescriptor 实例。

5、观测更新的数据在视图层可以直接访问到。

6、APP 端视图层的页面引用资源的路径相对于根目录计算，例如：./static/test.js。

7、APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）

8、H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。

来个小demo

<template>
  <view>
        <!-- 这里的:change:msg 旨在于监听逻辑层的msg变化，有变化就调用renderjs内容 -->
        <!-- 这里要注意，render。receiveMsg中的render是下面renderjs定义的module名称 -->
        <view @click="renderScript.emitData" :msg="msg" :change:msg="render.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="render" 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>
复制代码