仮想ライフサイクル

13878 ワード
vue テキストリンク

Vueライフサイクルタイプ

  • Create
  • Mount
  • Update
  • Destory

    • 🥒 1. Create


    1) beforeCreate


    データ、イベント、およびモニターを設定する前に呼び出されるライフサイクルフック.
  • このアクセス不可/ドメインアクセス不可

    • 2) created


    データ、計算、メソッド、watchなどのオプション設定が完了しているので、dataなどを使用できます.
  • このアクセス可能/ドメインアクセス不可

    • 🥒 2. Mount


    1) beforeMount


    DOMに構成部品を追加する前に実行したフック.

    2) Mounted


    DOM後に呼び出されたライフサイクルフックに構成部品を追加します.
  • このアクセス可能/ドメインアクセス可能

    • 🥒 3. Update


    構成部品の再ロード(たとえば、
  • 構成部品で使用する属性が変更された)時に実行するライフサイクルフック
    • .

    1) beforeUpdate


    DOMを再レンダリングする前に呼び出されるライフサイクルフック.

    2) updated


    DOMを再レンダリングした後に呼び出されるライフサイクルフック

    create/mountの使用

    <body>

<div id="app">
  <h1>{{msg}}</h1>
</div>
<script>

  //App 변수를 통해 넣는다
  const App = {
    data(){
      return {
        msg : 'Hello Vue!'
      }
    },
  
    //view application이 만들어지기 직전에
    beforeCreate(){
      //this를 통해 data를 다룰 수 없다.
      //app을 생성하기 직전이라 this를 통해 msg에 접근 할 수 없다.
      //활용할 일이 거의 없다.  (데이터 접근 X , 할 수 있는 일이 제한적)
      console.log('beforeCreate',this.msg)
      console.log(document.querySelector('h1'))
    },
  
    //view application이 만들어지기 직후
    created(){
      console.log('Created',this.msg)
      console.log(document.querySelector('h1'))
    },
  
    //view application이 html 구조와 연결 되기 직전
    beforeMount(){
      console.log('beforeMount',this.msg)
      console.log(document.querySelector('h1'))
    },
  
    //view application이 html 구조와 연결 되기 직후
    // html 구조가 연결된 직후에만 querySelector 사용가능
    mounted(){
      console.log('mounted',this.msg)
      console.log(document.querySelector('h1'))
    }

  }

  //application 객체
 const app = Vue.createApp(App)

  // 어떤요소에다가 mount 할 것인가
  // 고유한 id에 하는 것을 추천 class말고
  // viewModel은 app을 통해 반환된 인스턴스이다.
  // 인스턴스의 속성과 메소드를 통해 다양한 것을 사용할 수 있다.
  const vm = app.mount('#app')

</script>
</body>

    updateの使用

    <body>

<div id="app">
  <h1>{{msg}}</h1>
</div>
<script>

  //App 변수를 통해 넣는다
  const App = {
    data(){
      return {
        msg : 'Hello Vue!'
      }
    },
    beforeUpdate(){
      console.log('beforeUpdate',this.msg)
      console.log(document.querySelector('h1').textContent)
    },
    updated(){
      console.log('updated',this.msg)
      console.log(document.querySelector('h1').textContent)
    }
  }

  //application 객체
 const app = Vue.createApp(App)

  // 어떤요소에다가 mount 할 것인가
  // 고유한 id에 하는 것을 추천 class말고
  // viewModel은 app을 통해 반환된 인스턴스이다.
  // 인스턴스의 속성과 메소드를 통해 다양한 것을 사용할 수 있다.
  const vm = app.mount('#app')

</script>
    更新前と更新後のthis.msgの結果は同じです.
    これは、beforeUpdateの更新目標が次のことを意味します.
    データが更新される前ではなく、画面が更新される前に.
    データ更新->this.msg
    画面update->document.querySelector('h1').textContent

    ソース


    ライフサイクル
    [問題解決]Baek Jun-14226表情(dfs&bfs)
    MyBatisのLazy Load + Jacksonでシリアライズエラーになる件の回避方法