探索Vue3 Reactivity在小程序中的使用 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

探索Vue3 Reactivity在小程序中的使用

发表时间:2021-1-6

发布人:葵宇科技

浏览次数:80

1. 获取@vue/reactivity的源码

从哪里获取都可以,不要使用小程序的npm构建工具就行,会有问题。

2. 小程序app.js中导入该模块

复制源码到你自己定义的文件中,将模块导入后,为了方便使用,后期不想再其他页面中导入,把模块中的所有函数赋值给wx.d(不赋值给wx是可能会覆盖wx中的函数,但其实并不会,只是不想污染wx)

//app.js
import * as reactivity from './vendor/reactivity/reactivity.esm-browser.prod'

App({
  onLaunch: function () {
    this.initVueReactive()
  },

  initVueReactive() {
    console.log(Object.keys(reactivity))
    wx.d = {}
    Object.keys(reactivity).forEach(key => {
      wx.d[key] = reactivity[key]
    })
  }
})
复制代码

编写shim.wx.d.ts文件,使用vscode/webstorm会有提示,因为只实验了以下三种功能,所以只有三个函数定义

declare namespace wx {
  namespace d {
    function reactive(options: any): void;
    function effect(callback: Function): void;
    function computed(callback: Function): any;
  }
}

复制代码

在vscode中使用将会有提示

image.png

3. 编写一个简单的商品总价计算页面来测试(假装给Page添加了watch和computed