微信小程序实现类似Vue中的computed、watch功能

微信小程序实现类似Vue中的computed、watch功能

构建npm

  1. 创建包管理器

    进入小程序后,打开终端,点击顶部"视图" - "终端"

    新建终端

    使用 npm init -y初始化包管理器,生成一个package.json文件

  2. 安装 npm 包

    javascript 复制代码
    npm install --save miniprogram-computed
  3. 构建npm

    点击开发者工具中的菜单栏:工具 --> 构建 npm

使用

在自定义组件中,以require的方式引入

  1. computed 基本用法

    javascript 复制代码
    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,
          })
        },
      },
    })
  2. watch 基本用法

    javascript 复制代码
    const computedBehavior = require('miniprogram-computed').behavior
    
    Component({
      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,
          })
        },
      },
    })
相关推荐
编程猪猪侠几秒前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
江城开朗的豌豆19 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
江城开朗的豌豆30 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
幽络源小助理10 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
汤姆yu10 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
鱼樱前端13 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆15 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅16 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水16 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了16 小时前
实现一个简单的Vue响应式
前端·vue.js