Vue.js差で作成された（）とマウント（）の

議論へようこそ

Geooo個人のブログ：https://geooo.gitee.io/geoooblog/

観察コード

  data:(){ 
   return { 
    name:"", 
    age:"", city:"" } }, created :(){ this.name= "Geooo" this.age = "21" this.city ="东莞" var x = document.getElementById("name")//第一个命令台错误 console.log(x.innerHTML); }, mounted: (){ var x = document.getElementById("name")//第二个命令台输出的结果 console.log(x.innerHTML); } }); 

コマンドを実行した後に最初の報告が間違っている、2番目のコマンドを実行するために見ることができます

の原理を説明します：

1. 作成し 、通常は特定のプロパティ値を初期化されたHTMLを呼び出す前にレンダリングされたテンプレートを、して、ビューにレンダリング
2. ページの初期化が完了し、その後、HTMLのDOMノードが必要ないくつかの操作を行い、通常の後、電話をレンダリングするHTMLにテンプレートに取り付けられました。

プロセスを説明しました

彼らはない、実際に上記のidできるので、私たちは、間違い最初のレポートを見ることができます getElementByIdを（ID） の要素と次のような理由から、見つけることができませんでした。

作成されたときに、ビューはHTMLをレンダリングされませんので、この場合には、動作のDOM HTMLに直接ノードは、関連する要素を見つけなければならない場合

この時間は、HTMLをレンダリングしているので、装着され、それは直接DOMノード、その結果の出力「Geooo」を操作することができます。