探索Vue3 Reactivity在小程序中(zhōng)的使用 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

探索Vue3 Reactivity在小程序中(zhōng)的使用

發表時間:2021-1-6

發布人:葵宇科技

浏覽次數:74

1. 獲取@vue/reactivity的源碼

從哪裡獲取都可(kě)以,不要使用小程序的npm構建工具就行,會有問(wèn)題。

2. 小程序app.js中(zhōng)導入該模塊

複制源碼到你(nǐ)自己定義的文(wén)件中(zhōng),将模塊導入後,為了方便使用,後期不想再其他頁面中(zhōng)導入,把模塊中(zhōng)的所有函數賦值給wx.d(不賦值給wx是可(kě)能會覆蓋wx中(zhōng)的函數,但其實并不會,隻是不想污染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文(wén)件,使用vscode/webstorm會有提示,因為隻實驗了以下(xià)三種功能,所以隻有三個(gè)函數定義

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

複制代碼

在vscode中(zhōng)使用将會有提示

image.png

3. 編寫一個(gè)簡單的商(shāng)品總價計算頁面來測試(假裝給Page添加了watch和(hé)computed