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

Jacquelyn38
• 阅读 1747

微信小程序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,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
thinkcmf+jsapi 实现微信支付
首先从小程序端接收订单号、金额等参数,然后后台进行统一下单,把微信支付的订单号返回,在把订单号发送给前台,前台拉起支付,返回参数后更改支付状态。。。回调publicfunctionnotify(){$wechatDb::name('wechat')where('status',1)find();
LinMeng LinMeng
2年前
Vue3学习笔记---常用Composition API
1.拉开序幕的setup1.理解:Vue3.0中一个新的配置项,值为一个函数2.setup是所有ComponsitionAPI(组合API)“表演的舞台”3.组件中所用到的:数据,方法等等,均要配置在setup中4.setup函数的两种返回值:1.若返回一个对象,则对象中的属性、方法、在模板中均可以直接使用(重点关注!)2.若返回一
梦
3年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
3年前
10分钟上线
_摘要:_ 阿里云函数计算是一个事件驱动的全托管计算服务。通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传。微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播。当微信小程序遇见serverless,他们会产生奇妙火花,利用函数计算可以快速搭建微信小程序的serverle.点此查看原文:http://clic
Wesley13 Wesley13
3年前
5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你,可以关注和了解一下哦!WeUIWXSSWeUIWXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。