VueでリアルDOMを操作しない方が良い理由

Question

現在Vue.jsを学習しています。

仮想DOMを利用することでレンダリングコストを抑えることができることは理解できました。

逆にVue.jsでリアルDOMを操作しない方が理由はどんなものが挙げられるのでしょうか。
教えていただければと思います。よろしくお願いします。

Answer 1

逆にVue.jsでリアルDOMを操作しない方が理由はどんなものが挙げられるのでしょうか。

「しないほうがいい」ではなく、（Vue.jsの挙動を把握しているのでなければ）してはいけません。

Vue.jsなどの仮想DOM系フレームワークは、「現在のDOMの状態」と「更新後のDOMの状態」をデータとして持っていて、差のあるところだけを反映して高速化するような仕組みになっています。

ここでDOMを直接変更してしまうと、Vue.jsが記憶する「現在のDOMの状態」と、実際のDOMの状態にずれが出てしまい、差分反映が正しく行えなくなってしまいます。

Comments

[gnuuu_07]

非常にわかりやすかったです。
ありがとうございます。