1***@qq.com
1***@qq.com
  • 发布:2019-05-15 16:26
  • 更新:2019-05-16 18:57
  • 阅读:921

【报Bug】自定义组件编译模式中使用vuex+计算属性computed的时候this指向有问题

分类:uni-app
<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view @click="aa">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    var _self;  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  
            _self=this;  
        },  
        methods: {  
            aa(){  
                _self.$data.title='abcd';  
                console.log(this.$store.state.user.cs);  
                console.log(_self.$store.state.user.cs);  
            }  
        },  
        computed: {  
            cs(){  
                console.log(_self.$store.state.user.cs);  
                return _self.$store.state.user.cs;  
                // 这里会报错  
            }  
        }  
    }  
</script>

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]

重现步骤

[步骤]
运行直接报错,把_self换成this才有效,如果用_self则直接报一大堆错,但是之前项目中都是使用的_self,求助

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

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

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

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

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-05-15 16:26 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者) - 我是小提莫

顶贴顶贴,求解决

DCloud_UNI_FXY

DCloud_UNI_FXY

执行时机问题,你这样的代码,依赖于 onLoad 和 computed 的执行顺序,要求必须先 onLoad,再执行 computed 等其他逻辑,很容易出 bug 的。
另外考虑如下场景,A 页面跳转 A 页面,你这个_self 就会变成第二个 A 页面的 this,
这样使用还容易造成内存泄漏,始终释放不了当前的页面对象

  • 1***@qq.com (作者)

    直接用this?好像如果不用箭头函数的话会出现this指向问题吧?

    2019-05-16 19:04

  • DCloud_UNI_FXY

    回复 1***@qq.com: Vue 内定义的方法之类的可以直接 this,uni 的 api 回调用箭头函数

    2019-05-16 19:49

  • 1***@qq.com (作者)

    回复 DCloud_UNI_FXY: 那为什么之前好好地,最新版编辑器白分之百报错

    2019-05-18 09:55

  • DCloud_UNI_FXY

    回复 1***@qq.com: onLoad 和 computed 两种模式执行顺序不一致。自定义模式下 computed 执行早于 onLoad 以保证尽快渲染页面

    2019-05-18 12:42

该问题目前已经被锁定, 无法添加新回复