微信小程序实现类似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,
          })
        },
      },
    })
相关推荐
清风细雨_林木木1 小时前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
BillKu2 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
前端农民工ws3 小时前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
百思可瑞教育3 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿5 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11255 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_5 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
我是日安5 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
槿泽5 小时前
Vue集成Electron目前最新版本
前端·vue.js·electron
用户31506327304875 小时前
使用 vue-virtual-scroller 实现高性能传输列表功能总结
javascript·vue.js