<h3 dir="auto">Version</h3>
<p dir="auto">2.7.14</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://stackblitz.com/edit/vitejs-vite-zxmy3e?file=src%2Fcomponents%2FHelloWorld.vue,src%2FApp.vue&amp;terminal=dev" rel="nofollow">stackblitz.com</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Comp.vue
defineProps&lt;{ msg: boolean | null }&gt;();"><pre class="notranslate"><span class="pl-c">// Comp.vue</span>
<span class="pl-en">defineProps</span><span class="pl-kos">&lt;</span><span class="pl-kos">{</span> <span class="pl-c1">msg</span>: <span class="pl-smi">boolean</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- App.vue --&gt;
&lt;template&gt;
  &lt;Comp :msg=&quot;null&quot; /&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-c">&lt;!-- App.vue --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">Comp</span> <span class="pl-c1">:msg</span>="<span class="pl-s">null</span>" /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">No warnings<br>
Vue 3: <a href="https://sfc.vuejs.org/#__DEV__eNp9kLtuwzAMRX+F0JIEiKXdcAMU3Tq0BbpqcRzaVWA9QMkpClf/XqrpIw8gmy55eUWeWdyHIA8Tilo0sSMTEkRMU9hoZ2zwlODB2wA9eQsLqYoo9oV2jTr62ckioQ1jm5AVQNOVmbr3/k4LN42jFqC406g/m1iLY35l2yD30TveYC7D+qcRtajhu1Jq/GfRWrylFGKtVOy7ssg+Sk+D4pekySVjUWK01Zb8e0TiYC3WJxmKiwekitDtkJBuZV5Yr3JLbNYu8ym/WC4pwti6gRmUY/j+HfbG4Qv5EJsZGE8NW+9HbB18QuEEebNcnaH9BzvP8Pj6/CRjIuMG038sOWAFOZ9SzV97tqJr" rel="nofollow">https://sfc.vuejs.org/#__DEV__eNp9kLtuwzAMRX+F0JIEiKXdcAMU3Tq0BbpqcRzaVWA9QMkpClf/XqrpIw8gmy55eUWeWdyHIA8Tilo0sSMTEkRMU9hoZ2zwlODB2wA9eQsLqYoo9oV2jTr62ckioQ1jm5AVQNOVmbr3/k4LN42jFqC406g/m1iLY35l2yD30TveYC7D+qcRtajhu1Jq/GfRWrylFGKtVOy7ssg+Sk+D4pekySVjUWK01Zb8e0TiYC3WJxmKiwekitDtkJBuZV5Yr3JLbNYu8ym/WC4pwti6gRmUY/j+HfbG4Qv5EJsZGE8NW+9HbB18QuEEebNcnaH9BzvP8Pj6/CRjIuMG038sOWAFOZ9SzV97tqJr</a></p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto"><code class="notranslate">Invalid prop type: "null" is not a constructor</code> and <code class="notranslate">Invalid prop: type check failed for prop "msg". Expected Boolean, , got Null</code> warnings</p>
<h3 dir="auto">Additional notes</h3>
<p dir="auto">Warnings per se are not the issue, they can be fixed by changing the prop definition to <code class="notranslate">msg?: boolean</code> which also accepts booleans, the issue is that this behaviour is not same as in Vue 3</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Redundant properties (and low cohesion for each) for asynchronous evaluation:<br>
为了异步求值虚设条目（并降低每个功能的内聚性）：</p>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div&gt;{{ result1 }} {{ result2 }}&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: [&quot;url1&quot;, &quot;url2&quot;],
  data () {
    return {
      result1: &quot;&quot;,
      result2: &quot;&quot;
    };
  },
  watch: {
    async url1 (url1) {
      this.result1 = await getPromise(url1);
    },
    async url2 (url2) {
      this.result2 = await getPromise(url2);
    }
  }
};
&lt;/script&gt;"><pre class="notranslate">&lt;<span class="pl-ent">template</span>&gt;
  &lt;<span class="pl-ent">div</span>&gt;{{ result1 }} {{ result2 }}&lt;/<span class="pl-ent">div</span>&gt;
&lt;/<span class="pl-ent">template</span>&gt;

<span class="pl-s1">&lt;<span class="pl-ent">script</span>&gt;</span>
<span class="pl-s1"><span class="pl-k">export</span> <span class="pl-c1">default</span> {</span>
<span class="pl-s1">  props<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">"</span>url1<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>url2<span class="pl-pds">"</span></span>],</span>
<span class="pl-s1">  <span class="pl-en">data</span> () {</span>
<span class="pl-s1">    <span class="pl-k">return</span> {</span>
<span class="pl-s1">      result1<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>,</span>
<span class="pl-s1">      result2<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span></span>
<span class="pl-s1">    };</span>
<span class="pl-s1">  },</span>
<span class="pl-s1">  watch<span class="pl-k">:</span> {</span>
<span class="pl-s1">    <span class="pl-k">async</span> <span class="pl-en">url1</span> (<span class="pl-smi">url1</span>) {</span>
<span class="pl-s1">      <span class="pl-c1">this</span>.<span class="pl-smi">result1</span> <span class="pl-k">=</span> <span class="pl-k">await</span> <span class="pl-en">getPromise</span>(url1);</span>
<span class="pl-s1">    },</span>
<span class="pl-s1">    <span class="pl-k">async</span> <span class="pl-en">url2</span> (<span class="pl-smi">url2</span>) {</span>
<span class="pl-s1">      <span class="pl-c1">this</span>.<span class="pl-smi">result2</span> <span class="pl-k">=</span> <span class="pl-k">await</span> <span class="pl-en">getPromise</span>(url2);</span>
<span class="pl-s1">    }</span>
<span class="pl-s1">  }</span>
<span class="pl-s1">};</span>
<span class="pl-s1">&lt;/<span class="pl-ent">script</span>&gt;</span></pre></div>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div&gt;{{ result1 }} {{ result2 }}&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: [&quot;url1&quot;, &quot;url2&quot;],
  computed: {
    result1 () {
      return getPromise(this.url1);
    },
    result2 () {
      return getPromise(this.url2);
    }
  }
};
&lt;/script&gt;"><pre class="notranslate">&lt;<span class="pl-ent">template</span>&gt;
  &lt;<span class="pl-ent">div</span>&gt;{{ result1 }} {{ result2 }}&lt;/<span class="pl-ent">div</span>&gt;
&lt;/<span class="pl-ent">template</span>&gt;

<span class="pl-s1">&lt;<span class="pl-ent">script</span>&gt;</span>
<span class="pl-s1"><span class="pl-k">export</span> <span class="pl-c1">default</span> {</span>
<span class="pl-s1">  props<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">"</span>url1<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>url2<span class="pl-pds">"</span></span>],</span>
<span class="pl-s1">  computed<span class="pl-k">:</span> {</span>
<span class="pl-s1">    <span class="pl-en">result1</span> () {</span>
<span class="pl-s1">      <span class="pl-k">return</span> <span class="pl-en">getPromise</span>(<span class="pl-c1">this</span>.<span class="pl-smi">url1</span>);</span>
<span class="pl-s1">    },</span>
<span class="pl-s1">    <span class="pl-en">result2</span> () {</span>
<span class="pl-s1">      <span class="pl-k">return</span> <span class="pl-en">getPromise</span>(<span class="pl-c1">this</span>.<span class="pl-smi">url2</span>);</span>
<span class="pl-s1">    }</span>
<span class="pl-s1">  }</span>
<span class="pl-s1">};</span>
<span class="pl-s1">&lt;/<span class="pl-ent">script</span>&gt;</span></pre></div>