经unplugin-vue-components导入的组件，在小程序无法使用watch监听props的变化

[aloha66]

问题描述 使用unplugin-vue-components/vite，父组件v-model="visible"。visible变化，子组件watch了visible，h5表现正常，小程序无法触发watch。手动导入组件后正常

复现步骤

1. 点击按钮，父组件改变状态 v-model:visible="visible"

2. 子组件监听visible变化

   
   // 父组件
   <script lang="ts">
   // import Demo from '../../com/demo.vue'
   export default defineComponent({
   setup() {
   const visible = ref(false)
   watch(visible, () => {
     console.log('parent visible change')
   })
   
   return {
     visible,
   }
   },
   //  components: { Demo },
   })
   </script>

```vue
// 子组件
<script lang="ts">
export default defineComponent({
  props: {
    visible: Boolean,
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    console.log('props', props)

    watch(
      () => props.visible,
      (val) => {
        console.log('trigger')
      }
    )
  },
})
</script>

export default defineConfig({
  plugins: [
    uni(),
    Components({
      /* options */
      dts: 'src/components.d.ts',
    }),
    AutoImport({
      /* options */
      imports: ['vue'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],
  optimizeDeps: {
    exclude: ['vue-demi'],
  },
})

预期结果 会打印trigger

实际结果 没有结果

系统信息:

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

[aloha66]

https://github.com/aloha66/uni-preset-vue-vite

[aloha66]

再补充一下：没有使用插件情况下，如果是监听子孙组件，子孙组件的watch也没有触发

1. 去掉unplugin-vue-components插件
2. 在demo.vue内新增一个demo2.vue
3. demo2代码与demo代码雷同

测试工程已同步更新

[fxy060608]

已修复上述两个问题，更新cli：3.0.0-alpha-3030020211209001

建议尽量使用我们的easycom机制（ https://uniapp.dcloud.net.cn/collocation/pages?id=easycom ）来使用组件，不能保证三方插件的有效性

[aloha66]

easycom的确可以，之前我看官网介绍的时候以为不能在cli里面使用。不过我有些功能是需要依赖unplugin-vue-components，想到的办法是unplugin-vue-components插件目标地址改成其他文件夹，以此来使用easycom机制。 @fxy060608 大佬，我发现目前存在两个问题

1. unplugin-vue-components问题仍未解决，可能是我之前把两个问题的代码都整合在一起，你复现不了(复现代码在bug/auto-coms分支上)
2. 更新3030020211209001后发现问题(复现代码在bug/icon分支上) yarn dev:mp-weixin之后报错

[fxy060608]

easycom的确可以，之前我看官网介绍的时候以为不能在cli里面使用。不过我有些功能是需要依赖unplugin-vue-components，想到的办法是unplugin-vue-components插件目标地址改成其他文件夹，以此来使用easycom机制。 @fxy060608 大佬，我发现目前存在两个问题

1. unplugin-vue-components问题仍未解决，可能是我之前把两个问题的代码都整合在一起，你复现不了(复现代码在bug/auto-coms分支上)
2. 更新3030020211209001后发现问题(复现代码在bug/icon分支上) yarn dev:mp-weixin之后报错

1. 忘记提醒了，需要把unplugin-vue-components插件提前到uni之前
2. 小程序端不支持 unplugin-icons 插件，小程序没有svg标签

[aloha66]

easycom的确可以，之前我看官网介绍的时候以为不能在cli里面使用。不过我有些功能是需要依赖unplugin-vue-components，想到的办法是unplugin-vue-components插件目标地址改成其他文件夹，以此来使用easycom机制。 @fxy060608 大佬，我发现目前存在两个问题

1. unplugin-vue-components问题仍未解决，可能是我之前把两个问题的代码都整合在一起，你复现不了(复现代码在bug/auto-coms分支上)
2. 更新3030020211209001后发现问题(复现代码在bug/icon分支上) yarn dev:mp-weixin之后报错

1. 忘记提醒了，需要把unplugin-vue-components插件提前到uni之前
2. 小程序端不支持 unplugin-icons 插件，小程序没有svg标签

嗯嗯可以了。我发完这个comment也想过，小程序没有svg标签，新版本应该是加了抛出报错信息。 我之前的写法svg是没有加条件编译的。 想请教一下该怎么封装？我想用的时候写法简洁点。我想到的是用<component is=""/>。但是props的icon我这个场景应该只能传字符串吧？因为要变成一个url给<image/>。<component is="字符串"/>这样写又没用……

// 用法
<t-icon icon="akar-icons-circle-check-fill" />

// t-icon.vue
<script lang="ts">
export default {
  props: {
    icon: {},
  },
  setup() {},
}
</script>
<template>
  // #ifdef H5
  <component :is="icon"></component>
  // #endif 

  // #ifdef MP-WEIXIN
  <image src="'https://api.iconify.design/icon的地址处理再拼接"/>
  // #endif
</template>

[fxy060608]

是props的icon我这

有什么特别的需求，一定要用svg或image吗？字体图标可以满足大部分需求吧，也不用考虑平台兼容性了

[aloha66]

是props的icon我这

有什么特别的需求，一定要用svg或image吗？字体图标可以满足大部分需求吧，也不用考虑平台兼容性了

没有，就探索一下可行性 那我把issue关了吧

[zhuchentong]

已修复上述两个问题，更新cli：3.0.0-alpha-3030020211209001

建议尽量使用我们的easycom机制（ https://uniapp.dcloud.net.cn/collocation/pages?id=easycom ）来使用组件，不能保证三方插件的有效性

easycom 主要问题是会丢失组件类型以及相关的代码提示

[fxy060608]

已修复上述两个问题，更新cli：3.0.0-alpha-3030020211209001 建议尽量使用我们的easycom机制（ https://uniapp.dcloud.net.cn/collocation/pages?id=easycom ）来使用组件，不能保证三方插件的有效性

easycom 主要问题是会丢失组件类型以及相关的代码提示

是指的缺少 d.ts，在 Visual Studio Code 中使用不便吧？HBuilderX 支持 easycom 提示

[zhuchentong]

用的pug所以HBuilderX也没有提示，不过好像可以用easycom加载 ，然后自己写个插件只生成d.ts就行

[brandonxiang]

支持unplugin-vue-components才是王道