vueでマウントされたものと作成されたものの違いは何ですか

違い: 1. created はテンプレートが HTML にレンダリングされる前に呼び出されます。つまり、特定の属性値は通常初期化されてからビューにレンダリングされますが、mount はテンプレートが HTML にレンダリングされた後に呼び出されます。通常は、初期化ページが完了した後、HTML の dom ノードで必要な操作を実行します。 2. チャートの一部の初期構成は作成時に実行できません。HTML がレンダリングされるまで待ってから続行する必要がありますが、マウントされた場合は実行できます。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

1.ライフサイクルとは何ですか?

一般的な言葉で言えば、

Vue のインスタンスまたはコンポーネントが作成から破棄まで通過する一連のプロセスです。 厳密ではありませんが、基本的には理解できます。

一連の実践を通じて、発生したすべての問題を整理しました。今日は、作成されたものとマウントされたものの違いを記録します。

2. 作成とマウントの違いは何ですか?

#公式イラストは次のとおりです:

##画像から 2 つのノードを見てみましょう:

created: テンプレートが HTML にレンダリングされる前に呼び出されます。つまり、通常、特定の属性値が初期化されてからレンダリングされます。ビューに。

mounted: テンプレートが HTML にレンダリングされた後、通常は初期化ページが完了し、必要な操作が HTML の DOM ノードで実行された後に呼び出されます。

実際には、この 2 つの方が理解しやすいです。Created は通常、より頻繁に使用されますが、mounted は通常、一部のプラグインまたはコンポーネントの使用中に操作されます。プラグイン chart.js. :

var ctx = document.getElementById(ID); 通常はこのステップがあり、これをコンポーネントに書き込むと、一部の初期設定を実行できないことがわかります。この HTML はレンダリング後にのみ実行できるため、マウントするのが最良の選択です。例を見てみましょう (コンポーネントを使用)。

#3. 例

Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"

• {{name}}
• {{age}}
• {{city}}

",         created:function(){             this.name="唐浩益"             this.age = "12"             this.city ="杭州"             var x = document.getElementById("name")//第一个命令台错误             console.log(x.innerHTML);         },         mounted:function(){             var x = document.getElementById("name")//第二个命令台输出的结果             console.log(x.innerHTML);         }     });     var vm = new Vue({         el:"#example1"     })

次のように出力が表示されます:

#作成された に初期値が割り当てられると、正常にレンダリングされることがわかります。

#ただし、同時に、次のようにコンソールを確認してください。

わかりました。報告された最初のエラーを確認しました。実際には、ID が見つからなかったためです。getElementById(ID) で要素が見つかりませんでした。理由は次のとおりです:

作成した時点ではビュー内のhtmlはレンダリングされていないので、この時点でhtmlのdomノードを直接操作しても該当する要素は絶対に見つかりません

#.マウントでは、この時点でhtmlがレンダリングされているため、domノードを直接操作できるため、結果「Tang Haoyi」が出力されます。

上記はマウントとマウンティングの違いを私なりにまとめたもので、比較的簡単に書いていますが、感想を深めるために記録しておきます。 [関連する推奨事項:

vuejs ビデオ チュートリアル

、

Web フロントエンド開発

]

以上がvueでマウントされたものと作成されたものの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。