Vue.js VueJS-我们可以防止使用合成进行组件渲染吗？

直到现在，我还在组件中使用带v-if的计算属性，以避免在未提供基本道具的情况下渲染，例如：

<template>
  <div v-if="basicPropsProvided">
      Blabla
  </div>
</template>

<script>
export default{
  props: {
    icon: { type: String, required: true },
    title: { type: String, required: true },
    url: { type: String, required: true }
  },
  computed: {
    basicPropsProvided(): boolean {
      return !!this.title && !!this.icon && !!this.url
    }
  }
}
</script>

---

我尝试将此逻辑移到设置方法，但没有成功。您认为有没有一种方法可以通过composition api在其他组件上重用逻辑？

定义一个名为useCheckProvidedProps的可组合函数，该函数将props作为参数并返回计算属性：

<template>
  <div v-if="basicPropsProvided">
      Blabla
  </div>
</template>

<script>
import  {computed} from 'vue'
function useCheckProvidedProps (props){

return {
    basicPropsProvided:computed(()=>!!props.title && !!props.icon && !!props.url)
}
}
export default{
  props: {
    icon: { type: String, required: true },
    title: { type: String, required: true },
    url: { type: String, required: true }
  },
 setup(props){
  const {basicPropsProvided}=useCheckProvidedProps (props)

     return {basicPropsProvided}

}

}
</script>

---

你尝试了什么？你期望它如何工作？请描述，如果basicPropsProvided为false，应如何准确发生。我尝试将此逻辑移到设置方法中，但没有成功-再说一遍，您尝试了什么，什么不起作用？指出错误比从头开始写整个东西更容易。@EstusFlask如果计算结果为假，则由于v-if这是悬念的原因，组件不会被渲染。是的，可以通过合成来解决这个问题。但这并不包括它再次变假的情况。这是一种方法，但很难重复使用。您认为我们可以摆脱v-if吗？您可以在单独的文件中定义该可组合函数并重用它