Vue 技术体系开发必读

在平台中开发的前端页面，都是由数据流 data 和组件构成的。数据流就是数据的提供者，提供的数据用来可被观察。对于 Vue 技术体系的页面来说，组件通过 ref、reactive 引用数据，通过可被观察的方式进行渲染。即 Vue 的渲染体系是，用可追踪的数据进行渲染，当数据变化后会根据追踪的数据，重新渲染相关的组件。

Vue 体系的页面开发时如下划分：

• 设计：可视化设计页面
• 源码：w 源码（vue 中的 render 函数）
• js：设计可视部分的业务逻辑
• data.js：纯数据逻辑
• css：页面样式

Vue 体系的一个页面有两个 JS 文件，它们的作用与用法不同，下面详细介绍 js 文件和 data.js 文件的不同之处

js 文件

js 中是辅助页面的逻辑，setup scoped 片段。主要有：

1. 页面生命周期逻辑，如 onLoad、onInitState 等
2. 用户操作产生的回调 event、click、回调行等，例如：按钮的 onClick 回调
3. 页面中的简单逻辑，补充页面的动态效果，例如：返回 js 片段

调用页面组件的方法

vue 中是 use 型的 API 即 hooks，没有类的概念，定义的都是函数和局部变量，因此没有 this。调用页面 page 的方法时，不使用 this，改为使用 $page，例如:

       $page.getUIUrl("$UI/XXX")//url转换

       $page.navigateTo({url:"XXXX"})//打开页面

       $page.getServiceUrl("/main/XXX")//API转换

       $page.request({})//发请求

       $page.comp("context1")//获取组件

调用 JS 文件中的方法

js 与 w 在同一个作用域，所以在 w 中调用 JS 方法时，直接写函数名即可，例如：按钮的图标使用动态渲染，在 w 文件中的调用 JS 文件中的 MyCompRender 方法返回 js 片段

w 中的源码如下

    <antdv:Button text="按钮" id="button6" icon="{MyCompRender()}"></antdv:Button>

js 中的代码如下

    let MyCompRender = ()=>{
        return "down-circle,outlined";
    }

使用数据组件

在 js 中，如果要使用数据组件，需要用 useData 获取数据组件，然后在需要使用的地方直接通过变量调用，注意不能在使用的函数中通过 useData 获取。例如：

在实现渲染的 js 片段中使用

    let MyCompRender = ()=>{
        return <Layout><Layout.Content><Button>test render {mainData?.current?.fid}</Button></Layout.Content></Layout>
    }

在按钮事件中使用

    let onButton5Click = (event) => {
        mainData.setValue("state",1);
        mainData.getCurrentRow();
        mainData.next();
    }

data.js 文件

data.js 是在渲染之前执行的，不能操作 ui，里面只能写纯数据逻辑。

调用 data.js 文件中的方法

数据组件的事件和规则函数都在 data.js 中实现，data.js 中定义的规则函数使用 $page 调用，例如：在 data.js 文件中定义 setReadonly 方法，代码如下

在 w 文件中引用 data.js 中的方法，使用 $page，设计时代码如下图所示

可以使用的组件

在 data.js 中获取数据集组件，使用 this.comp("data的id")。在 data.js 文件中，还可以使用 this.comp("组件id") 获取：上下文组件、服务组件、工作流组件、序号组件等

例如：

    onMainDataBeforeSave(event){
        let wfmui = this.comp("wfmui");
        let wxContext = this.comp("wxContext0");
        let personFname = wxContext.getCurrentPersonMemberFName();
        let row = this.comp("restData0").getCurrentRow();
    }

特别说明

• 在 data.js 文件中，不能操作其他 ui 组件