返回渲染函数时使用 vue-devtools 和 composition-api（例如 JSX）

Posted 2023-02-22

【中文标题】返回渲染函数时使用 vue-devtools 和 composition-api（例如 JSX）

【英文标题】：Using vue-devtools with composition-api when returning a render function (e.g. JSX)

【发布时间】：2020-09-06 16:42:29

【问题描述】：

自从切换到composition-api 并返回render function（在我的例子中使用JSX with TypeScript 构造以允许在模板中输入支持），我已经失去了vue-devtools 检查computed properties 的能力。这是因为它们不再被组件直接暴露（props 仍然可用）。

如何在模板中获得良好的 TypeScript 支持，同时保留 vue-devtools 检查计算属性的能力？

这是一个使用 .vue 文件和对 vue-devtools 友好但在模板中不支持 TypeScript 的 composition-api 文件的示例：

SomeComponent.vue

<template>
  <div>
    <ul>
      <li> computedProperty </li>
    </ul>
  </div>
</template>

<script lang="ts">
  export default defineComponent(
    name: "SomeComponent",
    props:  
      // ...
    ,
    setup(props, ctx) 
      const computedProperty = computed(() => 
        // return ...some calc
      )

      return 
        computedProperty
      
    
  )
</script>

这是一个使用模板中正确支持 TypeScript 的 .tsx 文件的示例，但 vue-devtools 无法再直接检查 computedProperty：

SomeComponent.tsx

export default defineComponent(
    name: "SomeComponent",
    props:  
      // ...
    ,
    setup(props, ctx) 
      const computedProperty = computed(() => 
        // return ...some calc
      )

      return () => (
        <div>
          <ul>
            <li> computedProperty.value </li>
          </ul>
        </div>
      )
    
  )

我怎样才能两全其美？

【问题讨论】：

这里有一个相关的 GitHub 问题值得关注：vuejs/vue-devtools#1199

【参考方案1】：

export default defineComponent(
    name: "SomeComponent",
    props:  
      // ...
    ,
    setup(props, ctx) 
      const computedProperty = computed(() => 
        // return ...some calc
      )

      return  computedProperty 
    ,
    render() 
      return (
        <div>
          <ul>
            <li> this.computedProperty.value </li>
          </ul>
        </div>
      )
    
  )

【讨论】：

我可以猜测一下，分别设置和渲染允许 vue-devtools 跟踪属性，但是当我之前尝试这样做时，模板没有类型支持。