Veeライフサイクル

2804 ワード

ライフサイクル
vueではライフサイクルが大きく4段階に分かれています

create作成-vueインスタンスを作成し、

を初期化します.

mountマウント-vueインスタンスとビューを

に関連付ける.

update更新(ループ)-傍受処理データとビューの変化

destroy破棄-vueインスタンス

を破棄
ライフサイクル-フック関数
vueは、上記の4つの大きなフェーズにプログラミング可能な言い訳を提供し、この4つの期間内に独自の論理を書き込むことができます.vueは、ライフサイクルフック関数というオプションを構成することによって実現されます.

beforeCreate
インスタンスの初期化後、データ観測(data observer)およびevent/watcherイベント構成が呼び出される.



let vm = new Vue({
  el: '#app',
  data: {
    a: 1
  },
  beforeCreate() {
    console.log(this); //  vue  
    console.log(this.a); //undefined
  }
})

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

let vm = new Vue({
  el: '#app',
  data: {
    a: 1
  },
  methods: {
    fn(){
      console.log("fn  ")
    }
  }
  created() {
    console.log(this.a); //1
    this.fn(); //fn  
      console.log(this.$el) //undefined 
      //      ，        
  }
})

beforeMount
インスタンスオブジェクトの下の$elプロパティを設定のelパラメータで指定した要素に指します.

let vm = new Vue({
  el: '#app',
  template: 'Hello',
  created() {
      console.log(this.$el) //
      //      ,            $el    
  }
})
console.log(vm.$el); //Hello

mounted

把解析后的模板和页面元素进行绑定,用解析后的模板内容替换页面指定的元素

let vm = new Vue({
  el: '#app',
  template: 'Hello',
  mounted() {
      console.log(this.$el) //Hello
  }
})

beforeUpdate

updated
データが変化するとトリガーされます

let vm = new Vue({
  el: '#app',
  template: 'Hello',
  beforeUpdate() {
      console.log('beforeUpdate') 
  },
  updated() {
      console.log('updated') 
  }
})

vm.a = 10;
//  ： beforeUpdate updated

ダイナミックコンポーネント


  

let vm = new Vue({
  el: '#app',
      data: {
        componentId: 'index'
      },
      components: {
        index: {
          template: '    '
          },
          list: {
              template: '    '
          }
    }
});

vueの組み込みコンポーネント:component is:レンダリングするコンポーネントを指定

:keep-aliveコンポーネントを使用する場合、ダイナミックコンポーネントが表示されなければ破棄されず、メモリに保持されます.現在のコンポーネントに再構築を破棄するのではなく、停止状態を設定します.activated、deactivatedをトリガーします.
keep-aliveが使用されていない場合、このとき表示されなければ、コンポーネントは破棄され、destroyedがトリガーされます.

templateラベルの使い方のまとめ(vueの使い方のまとめを含む)について

シェルの ssh 接続「先」でコマンドを直接実行するワンライナー