`data`はいつ評価されますか？

Question

lifecycle diagramよりdataがいつ評価されるのか判断できません。

以下のコード例を参照してください：

<template> 
    ... 
</template> 

<script> 

    function generateUniqUserRef() { 
    return Math.random() + new Date().valueOf() 
    } 

    export default { 
    data() { 
     return { 
     user_ref: generateUniqUserRef() 
     } 
    } 
    } 
</script> 

はuser_ref一度だけ計算されますうか、再レンダリングをもう一度再評価する必要がありますか？

私はもう試しています。私はちょうど参照と正式な説明をしたいと思います。

Answer 1

• beforeCreate() - VUEインスタンスが new Vue({})によって初期化された後に呼び出さ。ここでは、データは観測されない、すなわち、データインスタンス内で初期化されるものは、 は知らない。

• created() - vueインスタンスの作成後に呼び出されます。ここでvue insanceはデータ内の反応性プロパティを知り、データ内の任意のプロパティを設定（変更）することができます

  user_refを1回だけ計算するか再描画で再評価しますか？

いいえいいえ、それは一度だけ計算されます。再レンダリングは、データに変更があった場合に発生し、仮想ドミノを再レンダリングするため、ドミノに依存している操作だけが再び発生します。

created()のuser_refは1回だけ呼び出されるため、計算することをお勧めします。

<script> 

    export default { 
    data() { 
     return { 
     user_ref: null 
     } 
    }, 
    created(){ 
     this.user_ref = Math.random() + new Date().valueOf(); 
    } 
    } 
</script> 

あなたは、コンソールログ

をチェックし、あなたのマシン上でこのコードを実行することができます

<template> 
    <div> 
    <h1>{{ msg }}</h1> 
    </div> 
</template> 

<script> 
    alert("hi i just ran"); // will only run once , not on every re-render 

    export default { 
      name: 'hello', 
      data() { 
      return { 
        msg: 'initial message' 
      }; 
      }, 
      beforeCreate(){ 
       console.log('from before create', this.msg); // undefined 
       console.log('from before create', this.msg === 'initial message'); // false 
      }, 
      created(){ 
       console.log('from created', this.msg); // 'initial message' 
       console.log('from created', this.msg === 'initial message'); //true 
      }, 
      mounted(){ 
       // changes the msg 
       setTimeout(()=>{ 
        this.msg = 'initial message changed'; 
       }, 1000); // causes dom to re-render 
      }, 
      beforeUpdate(){ 
       console.log('from before update', this.msg) // 'initial message changed' 
       setTimeout(()=>{ 
        this.msg = 'initial message changed again from before update'; 
       }, 1000); 
      }, 
      updated(){ 
       console.log('from updated', this.msg) 
      } 
    } 
</script> 

<style scoped> 

</style> 

出典：options/lifecyclehooks