composition-api 在 uni-app 微信小程序中的使用

一开始我按照 composition-api 官方文档 中所说的引入 import VueCompositionAPI from "@vue/composition-api"; 然后使用 Vue.use(VueCompositionAPI); 在开发模式下一切完美。

但编译之后就不行了，在网上找到了 https://github.com/dcloudio/uni-app/issues/1839 ，里面有我的解决方案，但修改 npm 包终究不太好，刚刚终于研究出了在main.js 中使用一段代码解决这个问题的方法

  /** uni-app composition api补丁 */ (() => {  
    /** uni-app 会在 beforeUpdate 的时候调用这个函数来进行和微信进程数据的交换 */  
    const oldPatch = Vue.prototype.__patch__ as Function;  
    Vue.prototype.__patch__ = function(...arg: any) {  
      补丁(this);  
      oldPatch.call(this, ...arg);  
    };  

    function 补丁(vm: any) {  
      if (vm._computedWatchers === undefined) {  
        vm._computedWatchers = {};  
      }  
      const ret = vm._data;  
      var rawBindings = getRawBindings(vm);  
      if (rawBindings) {  
        Object.keys(rawBindings).forEach(function(key) {  
          // && vm.mpType === "component"  
          if (config.is_dev) {  
            /** 开发版补丁 */  
            const v = rawBindings[key];  
            // console.log("[ret[key]] " + key, ret[key], v);  
            if (isRef(v)) {  
              if (isReadonly(v)) {  
                /**  只读的值一般是计算属性，所以放到computed中，要是放到data中uni-app会尝试写，这样导致报错 */  
                vm._computedWatchers[key] = v;  
              } else {  
                ret[key] = v.value;  
              }  
            } else {  
              ret[key] = v;  
            }  
          } else {  
            /** 编译版补丁 */  
            ret[key] = undefined;  
          }  
        });  
      }  
    }  
    function getRawBindings(vm: any) {  
      return vm.__composition_api_state__ && vm.__composition_api_state__.rawBindings;  
    }  
  })();

只需要在加上这段代码即可编译后也能正常使用 composition-api 了。composition-api 真滴香