Vue.js Vuejs防止数据为空

在我的组件中，我有一些数据可能是无效的

<template>
  <p> field </p>
  <p> {{ maybeInvalid }} </p>
  <p> other field </p>
<template>

var component = {
  data: function () {
    return {
      maybeInvalid: xxx
  }
}

2-生成一个计算值

<template>
  <p> field </p>
  <p> {{ computedIsValid }} </p>
  <p> other field </p>
<template>

computed: {
  computedIsValid: function() {
    return isValid(maybeInvalid) ? maybeInvalid : "invalid";
  }
}

场

{{computedIsValid}

其他领域

计算：{
computedIsValid:函数（）{
返回有效（maybeInvalid）？maybeInvalid:“无效”；
}
}

3-构建一个组件

var isValidCompoenent = {
  props: ['maybeInvalid'],

  template: `
    <p v-if="isValid(maybeInvalid)"> {{ maybeInvalid }} </p>
    <p v-else> invalid </p>`

  methods: {
    isValid: function (data) {
      return data != null;
    }
  }
}

<template>
  <p> field </p>
  <is-valid-component :maybeInvalid="maybeInvalid" /> 
  <p> other field </p>
<template>

... 
components: {
  isValidComponent: isValidComponent
}

var isvalidComponent={
道具：['maybeInvalid']，
模板：`
{{maybeInvalid}
无效`
方法：{
isValid:函数（数据）{
返回数据！=null；
}
}
}

然后使用这个组件

var isValidCompoenent = {
  props: ['maybeInvalid'],

  template: `
    <p v-if="isValid(maybeInvalid)"> {{ maybeInvalid }} </p>
    <p v-else> invalid </p>`

  methods: {
    isValid: function (data) {
      return data != null;
    }
  }
}

<template>
  <p> field </p>
  <is-valid-component :maybeInvalid="maybeInvalid" /> 
  <p> other field </p>
<template>

... 
components: {
  isValidComponent: isValidComponent
}

场

其他领域

... 
组成部分：{
isValidComponent:isValidComponent
}

我想知道解决该模式的最佳（更惯用）解决方案是什么

---

谢谢

很难选择哪个更地道；这些都是使用Vue解决问题的惯用方法。换句话说，在Vue应用程序中看到它们中的任何一个我都不会不高兴

也就是说，在这种情况下，我会避开组件解决方案，除非您可能会在许多地方使用

是有效的
组件，而不仅仅是您在这里讨论的一个组件。此外，阅读代码的开发人员不会马上知道代码的具体用途；他们必须阅读
是否有效的代码

在我看来，使用计算的或
v-if
在这种情况下几乎是等效的，只有一个例外。使用上述相同的参数，阅读模板的Joe Developer将立即知道
v-if
会发生什么，但必须查看计算结果才能完全理解它。然而，这是一件非常小的事情。
您也可以使用指令）组件看起来像计算的糖，您可以用其中的计算属性替换方法。若你们经常需要检查isvalid，最好选择component，否则会被计算出来