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

發(fā)表時(shí)間：2021-1-6

發(fā)布人：葵宇科技

瀏覽次數(shù)：114

1. 獲取@vue/reactivity的源碼

從哪里獲取都可以，不要使用小程序的npm構(gòu)建工具就行，會(huì)有問題。

2. 小程序app.js中導(dǎo)入該模塊

復(fù)制源碼到你自己定義的文件中，將模塊導(dǎo)入后，為了方便使用，后期不想再其他頁(yè)面中導(dǎo)入，把模塊中的所有函數(shù)賦值給wx.d（不賦值給wx是可能會(huì)覆蓋wx中的函數(shù)，但其實(shí)并不會(huì)，只是不想污染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]
    })
  }
})
復(fù)制代碼

編寫shim.wx.d.ts文件，使用vscode/webstorm會(huì)有提示，因?yàn)橹粚?shí)驗(yàn)了以下三種功能，所以只有三個(gè)函數(shù)定義

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

復(fù)制代碼