zoukankan      html  css  js  c++  java
  • 微信小程序使用miniprogramcomputed遇到的问题

    前言
    最近使用 miniprogram-computed 遇到了几个坑,记录下来,告知后来者。

    环境
    微信开发者工具 稳定版 Stable Build (1.03.2008270)
    调试基础库 2.12.1
    miniprogram-computed: ^2.1.1
    引入miniprogram-computed


    命令行操作
    # 项目初始化
    npm init -y
    # 通过 npm 安装
    npm install --save miniprogram-computed 
    构建npm和使用npm
    可以参考我的另外一篇文章
    微信小程序三步操作引入Vant Weapp
    问题如下
    computed 中顺序延后的变量只能获取顺序靠前的变量
    <!-- test.wxml -->
    <view>
    a的值是:{{getA}}
    </view> 
    1、当 computed 中 curTempObj 在 getA 上面时

    // test.js
    Component({
    behaviors: [require('miniprogram-computed')],
    computed: {
    curTempObj (data) {
    const {tempArr, curTempIndex} = data
    return tempArr[curTempIndex]
    },
    getA (data) {
    const {curTempObj} = data
    return curTempObj ? curTempObj.a : '-'
    },
    },
    data: {
    tempArr: [
    {
    a: 1
    },
    {
    a: 2
    },
    ],
    curTempIndex: 0
    },
    }) 

    2、当 computed 中 curTempObj 在 getA 下面时

    // test.js
    Component({
    behaviors: [require('miniprogram-computed')],
    computed: {
    getA (data) {
    const {curTempObj} = data
    return curTempObj ? curTempObj.a : '-'
    },
    curTempObj (data) {
    const {tempArr, curTempIndex} = data
    return tempArr[curTempIndex]
    },
    },
    data: {
    tempArr: [
    {
    a: 1
    },
    {
    a: 2
    },
    ],
    curTempIndex: 0
    },
    }) 

    watch 中无法获取旧值
    // test.js
    Component({
    behaviors: [require('miniprogram-computed')],
    watch: {
    curTempIndex (n, o) {
    console.warn('curTempIndex', n, o);
    },
    },
    ready: function () {
    setTimeout(() => {
    this.setData({
    curTempIndex: 1
    })
    }, 1000);
    },
    data: {
    curTempIndex: 0
    },
    }) 


    总结
    miniprogram-computed 扩展框架的 computed 计算属性只能获取当前变量前面已经定义的变量
    miniprogram-computed 扩展框架的 watch 只能获取旧值,且只能在改变时才触发监听器

    ————————————————
    版权声明:本文为CSDN博主「harmsworth2016」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/harmsworth2016/article/details/108597069

  • 相关阅读:
    Vue系列:.sync 修饰符的作用及使用范例
    Vue系列:Websocket 使用配置
    Vue系列:Slot 插槽的使用范例
    Vue系列:滚动页面到指定位置实现
    Vue系列:为不同页面设置body背景颜色
    Element UI系列:Upload图片自定义上传
    Vue系列:wangEditor富文本编辑器简单例子
    Element UI系列:Select下拉框实现默认选择
    sublime text 3 15个常用插件介绍
    基于iis下 wcf接口发布
  • 原文地址:https://www.cnblogs.com/javalinux/p/14703168.html
Copyright © 2011-2022 走看看