search

NervJS / taro

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.34k stars 4.77k forks source link

Vue3 页面组件无法使用 export default new class { } #10263

Closed HyperLife1119 closed 1 year ago

HyperLife1119 commented 3 years ago

相关平台

微信小程序

复现仓库

https://github.com/HyperLife1119/taro-test 小程序基础库: 2.19.3 使用框架: Vue 3

复现步骤

编译到小程序，打开 index 首页，页面显示 Counter:； 打开 pages/index/index.vue ，将 new class 去除，重新编译，页面显示 Counter: 1；

期望结果

即使使用了 new class ，页面也应该输出 Counter: 1

实际结果

页面输出 Counter:

环境信息

👽 Taro v3.3.7

  Taro CLI 3.3.7 environment info:      
    System:
      OS: Windows 10
    Binaries:
      Node: 16.1.0 - D:\Node.js\node.EXE
      npm: 7.21.0 - D:\Node.js\npm.CMD

补充信息

由于需要使用到装饰器，需要使用到 class，而不是使用匿名对象 { }

Chen-jj commented 2 years ago

@HyperLife1119

Taro 会为开发者编写的 component 加上 mixins，从而注入一些逻辑：

https://github.com/NervJS/taro/blob/ddecae2fca0859681c1de3d6dd891f77e9b17cd0/packages/taro-runtime/src/dsl/vue3.ts#L35-L47

但是 Vue3 的 resolveMergedOptions 逻辑如下：

https://github.com/vuejs/vue-next/blob/7178716b4c875fc1adeac1d215a332223260a4f0/packages/runtime-core/src/componentOptions.ts#L953-L961

可以看到当使用了 mixins 时，会进行 Object.assign，这时会把 class 组件原型链上的方法（例如 data）给弄丢了，从而造成上述 bug。

暂时没有解决的办法。

HyperLife1119 commented 2 years ago

另外，还发现一个问题： 无法绑定 vant-weapp 组件库的 van-field 组件 readonly 属性

<van-field label="label" placeholder="placeholder" :readonly="true" />

Docs: https://vant-contrib.gitee.io/vant-weapp/#/field

HyperLife1119 commented 2 years ago

@HyperLife1119

Taro 会为开发者编写的 component 加上 mixins，从而注入一些逻辑：

https://github.com/NervJS/taro/blob/ddecae2fca0859681c1de3d6dd891f77e9b17cd0/packages/taro-runtime/src/dsl/vue3.ts#L35-L47

但是 Vue3 的 resolveMergedOptions 逻辑如下：

https://github.com/vuejs/vue-next/blob/7178716b4c875fc1adeac1d215a332223260a4f0/packages/runtime-core/src/componentOptions.ts#L953-L961

可以看到当使用了 mixins 时，会进行 Object.assign，这时会把 class 组件原型链上的方法（例如 data）给弄丢了，从而造成上述 bug。

暂时没有解决的办法。

如果编译到H5，却是正常的~

Chen-jj commented 2 years ago

试了 H5 也是不行，也会增加 mixins

HyperLife1119 commented 2 years ago

试了 H5 也是不行，也会增加 mixins

那可以顺便看看这个问题吗？

无法绑定 vant-weapp 组件库的 van-field 组件 readonly 属性

<van-field label="label" placeholder="placeholder" :readonly="true" />

可以在官方仓库里复现到 https://github.com/NervJS/taro3-vant-sample