hesi726
hesi726
  • 发布:2019-08-26 18:45
  • 更新:2019-08-27 18:41
  • 阅读:246

【报Bug】--- 重大BUG ( 无法在业务逻辑类中定义自己的方法或者只读字段 ), 急。。

分类:uni-app

详细问题描述

无法在业务逻辑类中定义自己的方法或者只读字段;

[内容]

我稍微分析了一下编译为微信小程序的逻辑,发现在 页面和页面内组件的 prop 传递参数时,
使用的是 JSON序列化 和 反序列化形式,这就使得无法序列化的对象(例如方法或者只读字段)在传递过程中丢失
(具体参见 mp.runtime.esm.js 中
3891行 _update方法 ==》5563行的 patch方法, ===》以及第 5550行的 cloneWithData 方法 (这儿使用 json序列化 和 反序列化 了))

[步骤]

  1. vue create -p dcloudio/uni-preset-vue my-project 选择 ts 创建基于 ts 的 uni-app 项目
  2. 创建文件 Person.ts
export default class Person {  
    /**  
     *   
     */  
    constructor(public name: string) {        
    }  
    /**   
          *通过只读字段获取 name, 用于演示   
          */  
    get nameInGet(): string {  
        console.log('准备通过 get 去获取 name');  
        return this.name;  
    }  
}
  1. 创建组件 Comp.vue
<template>  
    <view>  
        <view>{{person.name}}-11</view>  
        <view>{{person.nameInGet}}--11</view>  
    </view>  
</template>  
<script lang="ts">  
    export default {  
        props: {  
            person: {  
                required: true,  
                type: Object,  
                default: ()=>{}  
            },  
        }  
    }  
</script>
  1. 修改入口页面 index.vue
<template>  
    <view class="content">  
            <Comp :person='person'></Comp>  
    </view>  
</template>  
<script lang="ts">  
    import Vue from 'vue';  
    import Person from './Person';  
    import Comp from './Comp.vue';  
    export default Vue.extend({  
        data() {  
            return {  
                person: new Person("Wang")  
            }  
        },  
        components: {  
            Comp,  
        }  
    });  
</script>

[结果]

Wang-11
undefined--11

[期望]

Wang-11
Wang-11

IDE运行环境说明

HBuilder X

[IDE版本号] 2.2.2.20190816

[windows版本号] Windows 10

uni-app运行环境说明

[运行端是h5或app或某个小程序?] 微信小程序

[运行端版本号] 微信开发者工具 stable v1.02.1907300

[项目是cli创建的还是HBuilderX创建的?Cli 创建

[编译模式是老模板模式还是新的自定义组件模式?] 新的自定义组件模式

附件

联系方式

[QQ]

2019-08-26 18:45 负责人:无 分享
已邀请:
hesi726

hesi726 (作者)

暂时找到了一个解决方法。。。

不过还是想着 uni 能够重视这个问题。。

DCloud_UNI_FXY

DCloud_UNI_FXY

nameInGet 相当于在微信小程序中使用方法,小程序本身是不支持在模板中调用方法的。框架解决的话,会增加复杂度,并影响性能。建议不要使用方法模拟只读

hesi726

hesi726 (作者)

很简单的,
我就稍微改动了一下你们 mp.runtime.esj.js 下面的 cloneWithData 这个方法,将
最后一行代码,

return JSON.parse(JSON.stringify(ret))

这一句改为了自己的自定义的对象深度复制方法,运行的相当完好;

只是对于 get 方法,这个比较讨厌,因为它不会自动在 for .. in 之中出现,也就复制不了这个方法;
于是,我根据这儿的提示,
http://www.typescriptlang.org/docs/handbook/decorators.html
在 get 上加上了

       @enumerable(true)  
    get nameInGet() {  
        return this.name;  
    }

好了,现在完美运行;

有时间,我把这个代码上面那个深度复制对象改为 浅复制看看,能不能通过 prop 来共享同一个对象看看。。。

要回复问题请先登录注册