微信小程序使用miniprogram-computed遇到的問題

前言
最近使用 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