探索Vue3 Reactivity在小程序中的使用
发表时间:2021-1-6
发布人:葵宇科技
浏览次数:102
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中使用将会有提示