ライフサイクルベースのフロントエンド-Vue

第10章Vueのライフサイクル

初期化プロセスの一連行くために作成された各インスタンスVUE -例えば、テンプレートをコンパイルし、監視データの必要性は、例として、DOMとDOM更新の際にデータの変更にマウントされます。いくつかはまた、このプロセスで実行されますと呼ばれるフックのライフサイクルユーザーに様々な段階で独自のコードを追加する機会を与える関数、。

そのようなcreatedインスタンスが1つ作成された後、フックは、コードを実行するために使用されてもよいです。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

そこにもいくつかの他のフックのようなインスタンスのライフサイクルの各段階、で呼び出されているmounted、updatedとdestroyed。ライフサイクルフックthisコンテキスト・ポイントは、そのVueのインスタンスを呼び出します。

次の図は、ライフサイクルのインスタンスを示しています。あなたはすぐにすべてを理解していないが、あなたが学習し、使用を続けると、その基準値が高くなります。

<div id="app">
    {{ msg }}
    <input type="text" ref="txt" v-model="msg">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello vue',
            dataList: []
        },
        // 在vue对象初始化过程中执行
        beforeCreate(){
            console.log('beforeCreate');
            console.log(this.msg);// undefined
        },
        // 在vue对象初始化完成后执行
        created() {
            console.log('created');
            console.log(this.msg);//hello vue
        }
        // ……
    });
</script>