【Vue】ソースコードと組み合わせるとVueのライフサイクルがわかる

序文

ライフサイクルとは

各 Vue インスタンスは、作成時に一連の初期化プロセスを実行します。たとえば、データ監視の設定、テンプレートのコンパイル、インスタンスの DOM へのマウント、データ変更時の DOM の更新などを行う必要があります。作成、データの初期化、テンプレートのコンパイル、Domのマウント、レンダリング→更新→レンダリング、アンロードなどの一連のプロセスを経ています。同時に、このプロセス中にライフサイクルフックと呼ばれるいくつかの機能が実行されます。

次に、ライフサイクルフローチャートとVueソースコードを使用して、このプロセスで何が起こったのかを分析し、公式Webサイトからライフサイクルフローチャートを借ります

1.新しいビュー()

var vm = new Vue({})、空の Vue インスタンスオブジェクトを初期化することを意味し、他のメソッドやライフサイクルはありません

2. イベントとライフサイクルの初期化

空の Vue インスタンスオブジェクトが初期化され、その後、いくつかのデフォルトのライフサイクル関数とイベントが初期化されたことを示します。ソースコードから、イベントが beforeCreated の前に初期化されていることがわかります。

3.作成前

注: beforeCreate サイクルでは、データもメソッドも初期化されません! 現時点では、呼び出して操作することはできません

export default {
  name: '',
  data() {
   return {
    message: 'init'
   }
  },

  methods: {
    handleLog() {
      console.log('执行了handleLog方法')
    }
  },
 
  beforeCreate() {
    // 注意：在beforeCreate周期中，data和methods都没有被初始化！！
    console.log('beforeCreate')
    console.log(`this.message: ${this.message}`)
    this.handleLog()
  },
}

コンソールで確認できる実行、メソッドを呼び出してデータを出力できない

4.Init インジェクションと反応性

ソースコードから、このプロセスでデータやメソッドなどを初期化したことがわかります。

5.作成

これは2番目のライフサイクル関数です. createdでは、データとメソッドが初期化されています. メソッドでメソッドを呼び出したい場合、またはdataでデータを操作したい場合は、最も早いcreatedでのみ操作できます.

export default {
  name: '',
  data() {
   return {
    message: 'init'
   }
  },

  methods: {
    handleLog() {
      console.log('执行了handleLog方法')
    }
  },
 
   created() {
    // 在created中，data和methods都已经被初始化好了！
    // 如果要调用methods中的方法，或者操作data中的数据最早只能在created里面操作！
    console.log('created')
    console.log(this.message) // 输出： init
    this.handleLog() //  输出：执行了handleLog方法
  },
}

6. el とテンプレートの属性を決定する

ここでel属性があるかどうかを判定し、ある場合はtemplate属性があるかどうかを判定し、templateテンプレートがある場合はrender関数に変換し、template属性がない場合はコンパイルしますテンプレートとして el に対応する要素。

el 属性がない場合は、vm.$mount(el) メソッドを実行します。

注:これは、Vue が引き続きテンプレートを編集し、Vue コード内の命令を実行し、コンパイルされた最終的なテンプレート文字列をメモリ内に生成し、テンプレート文字列をメモリ内の DOM としてレンダリングすることを意味します。この時点では、テンプレートはメモリ内でのみレンダリングされ、テンプレートはページにマウントされていません。

7.マウント前

3 番目のライフサイクル関数は、テンプレートがメモリ内でコンパイルされているが、ページにレンダリングされておらず、この時点ではページがまだ古いことを示しています。

「ページはまだ古いですか？」という文の読み方は以下の例を参照

<div id="app">
    <div id="h3">{
   
   {message}}</div>
</div>


 beforeMount() {
    console.log('beforeMount')
    // 此时获取的html节点为null，原因是模板未渲染
    let a = document.querySelector('#h3').innerText
    console.log(a)
 },

beforeMount ライフサイクルが実行されると、ページの要素は実際には置き換えられず、以前にいくつかのテンプレート文字列が書き込まれただけです

8.マウント

これは 4 番目のライフサイクルです。このステップでは、メモリにコンパイルされたテンプレートが実際にブラウザページに置き換えられ、ユーザーはレンダリングされたページも見ることができます。el は新しく作成された vm.$el に置き換えられ、マウントされた成功

<div id="app">
    <div id="h3">{
   
   {message}}</div>
</div>


 mounted() {
    console.log('mounted')
    let a = document.querySelector('#h3').innerText
    console.log(a) // 正确输出：init
 },

注: マウントは、インスタンス作成中の最後のライフサイクル関数です

【Vue】ソースコードと組み合わせるとVueのライフサイクルがわかる

序文

おすすめ