微信小程序体验composition-api(类似vue3)

Jacquelyn38 等级 841 0 0
标签: 微信小程序

微信小程序composition-api用该是什么样子?

使用

使用起来应该像是这个样子

wxue(options)

setup

配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下

import { wxue, reactive } from 'wxue'

wxue({
  setup(options) {
    const test = reactive({
      x: 1,
      y: 2,
    })

    setInterval(() => {
      test.x++
    }, 1000)

    return {
      test,
    }
  },
})
ref

api

应该有如下api

  • reactive

  • ref

  • unref

  • toRef

  • toRefs

  • computed

  • watchEffect

  • watch

  • 各种钩子,与小程序生命周期一致

示例

import { wxue, nextTick, ref, onShow } from 'wxue'

function useAutoAdd(x) {
  const b = ref(x)
  setInterval(() => {
    b.value++
  }, 1000)
  return b
}

wxue({
  data: {},
  setup(options) {
    const b = useAutoAdd(2)

    onShow(() => {
      console.log('onShow form hooks', this)
    })

    function getXx() {
      console.log(this, 'getXx')
    }

    return {
      c: b,
      getXx,
      test,
    }
  },
  onLoad: function (options) {
    setTimeout(() => {
      this.test()
      console.log(this.data.b)
    }, 5000)
    this.getXx()
  },
  test: function () {
    nextTick(() => {
      console.log(this.data.a.b)
    })
    this.data['a.b'] = 111
    this.data['a.c'] = 111
  },
})

wxue

跟 vue 的 composition-api 类似,小程序端的逻辑复用的解决方案。

介绍

由于参照vue,暂且叫他wxue吧。提供了vuecomposition-api类似的用法。wxue源码 跪求star~

安装

npm i wxue -S

wxue

wxue(options)

options中需要配置setup,并且setup是一个函数

setup

返回一个对象,可包含对象或者是函数,函数将会挂载到this中,对象将挂载到data

reactive

返回对象的响应数据。

import { wxue, reactive } from 'wxue'

wxue({
  setup(options) {
    const test = reactive({
      x: 1,
      y: 2,
    })

    setInterval(() => {
      test.x++
    }, 1000)

    return {
      test,
    }
  },
})

ref

接受一个内部值并返回一个反应性且可变的ref对象。ref对象具有.value指向内部值的单个属性。

import { wxue, ref } from 'wxue'

wxue({
  setup(options) {
    const x = ref(1)

    setInterval(() => {
      x.value++
    }, 1000)

    return {
      x,
    }
  },
})

unref

如果参数是 ref,则返回内部值,否则返回参数本身。

toRef

可用于 ref 在源反应对象上为属性创建

const test = reactive({
  x: 1,
  y: 2,
})
const x = toRef(test, 'x')
return { x }

toRefs

将反应对象转换为普通对象,其中所得对象的每个属性都 ref 指向原始对象的相应属性,可用于解构

const test = reactive({
  x: 1,
  y: 2,
})
const { x } = toRefs(test)
return { x }

computed

计算属性 返回的值返回一个不变的反应性 ref 对象。

const computedX = computed(() => x.value + 1)
return { computedX }

watchEffect

它会在反应性地跟踪其依赖关系时立即运行一个函数,并在依赖关系发生更改时重新运行它。stop 停止监听

const count = ref(0)
const stop = watchEffect(() => console.log(count.value))
setTimeout(() => {
  count.value++
  if (count.value === 100) {
    stop()
  }
}, 1000)

watch

观察者数据源可以是返回值的 getter 函数,也可以直接是 ref, stop 停止监听

const count = ref(0)
const state = reactive({ count: 0 })
const stop = watch(ref, (count, prevCount) => {
  /* ... */
})
const stop2 = watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)
stop()
stop2()

hooks

支持小程序的所有生命周期 onLoad,onReady,onShow,onHide,onUnload,onPullDownRefresh,onReachBottom,onShareAppMessage

import { wxue, onShow } from 'wxue'

wxue({
  setup(options) {
    onShow(() => {
      console.log('onShow form hooks')
    })
  },
})

setData(page, data)

优化的setData,多次调用将合并成一次执行

nextTick()

setData是异步的,在setData执行后完成后执行的回调nextTick

// 1 返回Promise
await nextTick()
// 2 执行回调
nextTick(() => {})

其他

this.data的 set 进行了劫持,会调用setData

最后

欢迎大家提出宝贵的意见,如有错误还望评论区不要客气,大家共同学习,一起进步。github: https://github.com/kouchao/wxue,跪求star~

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/Zp0NiqYFKcrqTn7A3kz92Q,如有侵权,请联系删除。

收藏
评论区

相关推荐

微信小程序支付功能全流程实践
前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑! 知己知彼,方能百战不殆 小程序支付流程图 小程序支付交互流程图(https:/
微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序wxml使用substring
首先创建subutils.wxs文件 var sub function (val, start0, end17) { if (val.length 0 || val undefined) { return } if (val.length end) { return val.substring(start
微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
微信小程序苹果机wx.showModal()
最近做项目中,发现使用wx.showModal()苹果机出现取消文字不显示问题,纠正后显示正确 wx.showModal({ title: '提示', content:'登录后体验更多功能' }) wx.showModal({ cancelText: '取消', confi
微信小程序验证url地址
笔记类 var that this that.optional()是验证是否为空方法 url(value) { return that.optional(value) || /^(?:(?:(?:https?|ftp):)?//)(?:S(?::S)?@)?(?:
微信小程序部分api 会触发 onShow onHide
解决部分api触发小程序 onShow onHide 首先要明白 微信小程序的 onShow() onHide()分为页面级的和应用级的,应用级的就是app.js里面的那几个,页面级的就是pages里的 当使用了下列api时,均会触发页面级和应用级的onShow onHide 1. 点击右上角小圆点关闭小程序。 2. 图片预览:wx.preview
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
微信小程序 - 引入字体图标
网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:1、从上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压阿里图库 加入购物车购物车 下载代码图标文件内容2.、进入导入第
微信小程序 - 页面间传值
小程序页面间传值大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数event,我从当前页跳转到下一页,如果需要能返回,我都用的wx.naviga
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
推荐几个微信小程序开发小技巧
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家。如果对大家确实有帮助,别忘了点赞哦 🌟 ~1\. 开发中可能遇到的坑以及 Tips本来想写个小技巧的,结果我总结了一堆坑,没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂,从微信
微信小程序 - 生命周期篇
为什么需要掌握小程序的生命周期当你的领导张小三给你说: 这个请求应该在应用启动的时候发起呢 页面跳转的时候就要取消异步任务哦 应用隐藏的时候记得关闭一下定时器哈那时候的你会一脸懵逼和不知所措还无从下手吗综上所述:我们理所当然的要对微信小程序的生命周期做到滚瓜烂熟,只有这样才能让领
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。 QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦 【区别】:微信小程序的代码与QQ小程序的源码是不一样的。 微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option