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

  • 相关阅读:
    视频解析小技巧
    linux系统路由设置
    tracert路由跟踪命令
    php+nginx
    docker快速拉取镜像
    linux命令
    添加docker命令
    linux模糊查询文件名
    查看日志
    模板函数与模板类
  • 原文地址:https://www.cnblogs.com/javalinux/p/14703168.html
Copyright © 2011-2022 走看看