vue createdフック関数とmountedフック関数の使い方の違い
1：vueフレームを使う過程で、私達はよくいくつかのデータに初期化処理をしなければなりません。この時、私達がよく使うのはcreatedとmountedのオプションの中で処理をします。
まず公式の説明を見てみますと、クラウドはインスタンス作成後すぐに呼び出します。
このステップでは、インスタンスは、データ観測、属性および方法の演算、watch/eventイベントのフィードバックを行うように構成されています。しかし、マウント段階はまだ始まっていません。
この話の意味はハンガーの段階はまだ始まっていないということです。まだマウントを始めていないということです。つまり、テンプレートはまだレンダリングされていません。つまり、この時はidなどを使ってページの要素を調べても見つけられません。
次の例を見て証明します。
この例の結果は下記の通りです。このエラーはidがnameのDom要素であることを証明していません。テンプレートはまだレンダリングされていません。
したがって、一般的なcreadtedフック関数は主にデータを初期化するために用いられます。
2：mountedフックは、バックエンドにデータを取得した後、いくつかの業務処理を行うために使用されます。公式の説明は以下の通りです。
elは新しく作成されたvm.$lに置き換えられ、インスタンスにアップロードした後、フックを呼び出します。rootの例がドキュメント内の要素をマウントした場合、mountedが起動されたときvm.elもドキュメント内にあります。
このフック関数は完成後、つまりテンプレートレンダリングが完了したら呼び出されるという意味です。
実例を見ます
次は結果です
値を取ったということは、この時点ですでにvueテンプレートのレンダリングが完了しています。したがって、Dom操作は一般にmountedフック関数で行われる。
computted:{}プロパティを計算すると、何が属性を計算しますか？個人的にはデータに対して一定の操作を行うと理解しています。論理処理操作を含めて、計算属性のデータを監視します。計算属性はそれに基づいて更新され、相関依存性が変化したときには側だけが変化を更新し、結果を関数として返します。
その後、通常の属性をバインディングするようにテンプレートにバインディングして属性を計算することができます。
createdに入れることをおすすめします。
created：テンプレートをhtmlにレンダリングする前に呼び出します。すなわち、通常はいくつかの属性値を初期化してから、ビューにレンダリングします。
mounted：テンプレートをhtmlにレンダリングした後で呼び出して、通常は初期化ページが完成した後で、更にhtmlのdomノードに対していくつかの必要な操作を行います。
mountedフックでデータを要求すると、フラッシュ画面の問題になります。
実はロードタイミングの問題です。createdに置くとmountedより少し早いです。ページのマウントが終わる前に完了を要求すれば、フラッシュ画面が見えなくなります。
以上のこのvue createdフック関数とmountedフック関数の使い方の違いは、小編集が皆さんに共有している内容の全部です。参考にしていただければと思います。どうぞよろしくお願いします。
まず公式の説明を見てみますと、クラウドはインスタンス作成後すぐに呼び出します。
このステップでは、インスタンスは、データ観測、属性および方法の演算、watch/eventイベントのフィードバックを行うように構成されています。しかし、マウント段階はまだ始まっていません。
この話の意味はハンガーの段階はまだ始まっていないということです。まだマウントを始めていないということです。つまり、テンプレートはまだレンダリングされていません。つまり、この時はidなどを使ってページの要素を調べても見つけられません。
次の例を見て証明します。
この例の結果は下記の通りです。このエラーはidがnameのDom要素であることを証明していません。テンプレートはまだレンダリングされていません。
したがって、一般的なcreadtedフック関数は主にデータを初期化するために用いられます。
2：mountedフックは、バックエンドにデータを取得した後、いくつかの業務処理を行うために使用されます。公式の説明は以下の通りです。
elは新しく作成されたvm.$lに置き換えられ、インスタンスにアップロードした後、フックを呼び出します。rootの例がドキュメント内の要素をマウントした場合、mountedが起動されたときvm.elもドキュメント内にあります。
このフック関数は完成後、つまりテンプレートレンダリングが完了したら呼び出されるという意味です。
実例を見ます
次は結果です
値を取ったということは、この時点ですでにvueテンプレートのレンダリングが完了しています。したがって、Dom操作は一般にmountedフック関数で行われる。
computted:{}プロパティを計算すると、何が属性を計算しますか？個人的にはデータに対して一定の操作を行うと理解しています。論理処理操作を含めて、計算属性のデータを監視します。計算属性はそれに基づいて更新され、相関依存性が変化したときには側だけが変化を更新し、結果を関数として返します。
その後、通常の属性をバインディングするようにテンプレートにバインディングして属性を計算することができます。
<body>
<div id="box" :class="{a:true,b:true}">
<div></div>
{{msg}}
<div>
{{msg}} ：{{msg2}}
</div>
</div>
<script type="text/javascript">
window.οnlοad=function(){
new Vue({
el:"#box",
data:{
msg:"https://www.baidu.com"
},
computed:{
msg2:function(){
var s=this.msg.split(":")[0];
return s;
}
}
})
}
</script>
</body>createdに入れることをおすすめします。
created：テンプレートをhtmlにレンダリングする前に呼び出します。すなわち、通常はいくつかの属性値を初期化してから、ビューにレンダリングします。
mounted：テンプレートをhtmlにレンダリングした後で呼び出して、通常は初期化ページが完成した後で、更にhtmlのdomノードに対していくつかの必要な操作を行います。
mountedフックでデータを要求すると、フラッシュ画面の問題になります。
実はロードタイミングの問題です。createdに置くとmountedより少し早いです。ページのマウントが終わる前に完了を要求すれば、フラッシュ画面が見えなくなります。
以上のこのvue createdフック関数とmountedフック関数の使い方の違いは、小編集が皆さんに共有している内容の全部です。参考にしていただければと思います。どうぞよろしくお願いします。