v-if ディレクティブを使う方法で、liタブの中に<li v-if='todos.length' v-for='(todo,index) in todos'>と記入すると、

v-for は v-if よりも先に実行されるからですね。 今回のように todos が今、空の場合はそもそもループが回らないので、そのあとの v-if の判定も行われず、結局何も表示されないという仕組みになっています。

　とありますが、どうしてv-forがvi-ifよりも先に実行されるのかがわかりません。
そもそも先に実行されていてもされなくても、ループが回っていなくても、はじめからtodos:[]は空配列で<ul v-if='todos.length'>はfalseになるのだから、動画上で下記のように正しい書き方をしても、間違った書き方(<li v-if='todos.length' v-for='(todo,index) in todos'>)をしても問題なくコードは動くのではないかと思いましたが、そうはなりませんでした。

`<ul v-if='todos.length'>
  <li v-for='(todo,index) in todos'>`

どうして挙動に違いが出るのか教えていただけますと幸いです。
よろしくお願いいたしますm(_ _)m