微信小程序實現類似Vue中的computed、watch功能
- 構建npm
- 使用
構建npm
-
創建包管理器
進入小程序后,打開終端,點擊頂部“視圖” - “終端”
新建終端
使用npm init -y
初始化包管理器,生成一個package.json
文件
-
安裝 npm 包
npm install --save miniprogram-computed
-
構建npm
點擊開發者工具中的菜單欄:工具 --> 構建 npm
使用
在自定義組件中,以require的方式引入
- computed 基本用法
const computedBehavior = require('miniprogram-computed').behavior Component({behaviors: [computedBehavior],data: {a: 1,b: 1,},computed: {sum(data) {// 注意: computed 函數中不能訪問 this ,只有 data 對象可供訪問// 這個函數的返回值會被設置到 this.data.sum 字段中return data.a + data.b},},methods: {onTap() {this.setData({a: this.data.b,b: this.data.a + this.data.b,})},}, })
- watch 基本用法
const computedBehavior = require('miniprogram-computed').behaviorComponent({behaviors: [computedBehavior],data: {a: 1,b: 1,sum: 2,},watch: {'a, b': function (a, b) {this.setData({sum: a + b,})},},methods: {onTap() {this.setData({a: this.data.b,b: this.data.a + this.data.b,})},}, })