微信小程序获取hook返回的内容时，与h5存在差异

[aloha66]

问题描述 在h5可以正常输出 在微信小程序不能输出 不知道是平台限制还是bug

试过用toRefs，可以正常显示。 但也有两个问题

1. toRefs希望接收reactive类型的值，不是的话会报warning，加了的话感觉写法怪怪的
2. 基于1，真实情况是hook返回值也可能是某些函数，reactive里面加入方法，语义、心智上也是怪怪的

复现步骤

<script>
import Demo from '../../com/demo.vue'
import { ref, toRefs } from 'vue'

const useTest = () => {
  const demo = ref('demo')
  return {
    demo,
  }
}
export default {
  setup() {
    const test = useTest()
    return {
      // ...toRefs(test),
      test,
    }
  },
  components: { Demo },
}
</script>
<template>
   <Demo :demo="demo" :test="test">
</template>

<script lang="ts">
export default defineComponent({
  props: ['test', 'demo'],
  setup(props) {
    console.log('props', props)
  },
})
</script>
<template>
  <view>
    {{ test }}
    {{ demo }}
  </view>
</template>

系统信息:

• 发行平台: 微信小程序
• 操作系统 win10
• uni-app版本 "@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3030020211124001",

[fxy060608]

cli 更新至：3.0.0-alpha-3030020211201002

[aloha66]

cli 更新至：3.0.0-alpha-3030020211201002

大佬，3.0.0-alpha-3030020211201003用这个版本之后，inject 的内容undefined

    import { inject } from 'vue-demi'
    const contextConfig = inject('UseRequestConfigContext', {})
    console.log('contextConfig', contextConfig) // undefined

[fxy060608]

   import { inject } from 'vue-demi'
    const contextConfig = inject('UseRequestConfigContext', {})
    console.log('contextConfig', contextConfig) // undefined

查看： https://github.com/vueuse/vue-demi 的文档 你需要在vite.config.js中配置：

optimizeDeps: {
exclude: ["vue-demi"],
},

如果不考虑同时兼容vue2,vue3，建议使用vue本身提供的功能

[aloha66]

   import { inject } from 'vue-demi'
    const contextConfig = inject('UseRequestConfigContext', {})
    console.log('contextConfig', contextConfig) // undefined

查看： https://github.com/vueuse/vue-demi 的文档 你需要在vite.config.js中配置：

optimizeDeps: {
    exclude: ["vue-demi"],
  },

如果不考虑同时兼容vue2,vue3，建议使用vue本身提供的功能

大佬有个问题想请教一下，是这样的： 我在写一个通用的useRequest(之前已经完成一版，在生产环境也做了exclude: ["vue-demi"]，运行正常)。 现在有些功能在改动，uni项目有些bug，所以yarn link了开发环境的代码以方便调试。 在20211201003之前开发环境没有exclude: ["vue-demi"],也运行正常，想问一下为什么20211201003版本需要exclude呢？

[fxy060608]

   import { inject } from 'vue-demi'
    const contextConfig = inject('UseRequestConfigContext', {})
    console.log('contextConfig', contextConfig) // undefined

查看： https://github.com/vueuse/vue-demi 的文档 你需要在vite.config.js中配置：

optimizeDeps: {
    exclude: ["vue-demi"],
  },

如果不考虑同时兼容vue2,vue3，建议使用vue本身提供的功能

大佬有个问题想请教一下，是这样的： 我在写一个通用的useRequest(之前已经完成一版，在生产环境也做了exclude: ["vue-demi"]，运行正常)。 现在有些功能在改动，uni项目有些bug，所以yarn link了开发环境的代码以方便调试。 在20211201003之前开发环境没有exclude: ["vue-demi"],也运行正常，想问一下为什么20211201003版本需要exclude呢？

之前的版本，编译器内部强制禁用了optimizeDeps，新版本不再做限制

[aloha66]

thx

[aloha66]

<script lang="ts">
export default defineComponent({
  props: ['test'],
  setup(props) {
    const comp = computed(() => {
      return props.test.demo.value + '123'
    })

    return {
      comp,
    }
  },
})
</script>
<template>
  <view>
    {{ test }}
    <view>{{ comp }}</view>
  </view>
</template>

props.test.demo.value在小程序.value的值是undefined，没有.value能正常显示。目测是小程序的js部分漏了unref？看了你之前修改的代码也不知道在哪里修改:sweat: @fxy060608

[fxy060608]

<script lang="ts">
export default defineComponent({
  props: ['test'],
  setup(props) {
    const comp = computed(() => {
      return props.test.demo.value + '123'
    })

    return {
      comp,
    }
  },
})
</script>
<template>
  <view>
    {{ test }}
    <view>{{ comp }}</view>
  </view>
</template>

props.test.demo.value在小程序.value的值是undefined，没有.value能正常显示。目测是小程序的js部分漏了unref？看了你之前修改的代码也不知道在哪里修改😓 @fxy060608

目前是有问题，在小程序平台，会对 props 数据进行 unref，稍后解决一下 ref 的问题

[fxy060608]

@aloha66 cli 可以更新至：3.0.0-alpha-3030020211207001 本次更新，对 props 的相关逻辑做了底层重构，比较完整的支持了 vue 的 props 用法（包括支持函数，响应式等复杂对象类型） 你可以更新验证下相关功能是否正常

[aloha66]

看了一下代码,工作量好像挺大的 辛苦了