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

  • 相关阅读:
    HDU 1800 Flying to the Mars 字典树,STL中的map ,哈希树
    字典树 HDU 1075 What Are You Talking About
    字典树 HDU 1251 统计难题
    最小生成树prim算法 POJ2031
    POJ 1287 Networking 最小生成树
    次小生成树 POJ 2728
    最短路N题Tram SPFA
    poj2236 并查集
    POJ 1611并查集
    Number Sequence
  • 原文地址:https://www.cnblogs.com/javalinux/p/14703168.html
Copyright © 2011-2022 走看看