vue 生命週期

生命週期

Vue 實例從開始建立、初始化數據、編譯模板、掛載Dom和渲染、更新和渲染、卸載等一系列過程，這是 Vue 的生命週期

11 ：鉤子函數總數

8：4個階段每一個2個

2：和緩存相關的鉤子

1：捕獲錯誤

建立

beforeCreate： 通常不用

creared : 數據初始化 修改數據不會觸發更新的生命週期

掛載

beforeMount ：（第一次初始化最後一次改狀態）沒法訪問到狀態對應的節點，修改數據不會觸發更新的生命週期

mounted：有數據，有dom，會觸發更新的生命週期；掛載到dom樹上（重要），訪問dom，事件監聽setinterval，window.onscroll,ajax自動執行

更新

beforeUpdate：訪問節點訪問不到，數據發生改變，

updated：更新以後的dom，數據發生改變

；作賦值操做容易引發死循環

卸載

beforeDestroy：在組件銷燬以前 將無用的全局事件、全局計時器銷燬；

destroyed

經常使用的生命週期

ceated  數據請求
mounted dom初始化
beforeDestory  擦屁股的操做 彌補遺憾

isCreated = false 只剩beforeDestroy，destroyed
isCreated = true 只剩前四個
前四個只會執行一次
update 執行屢次
剩下兩個只能銷燬一次

案例：滾輪監聽,隨機改變顏色

<div id="app">
    <banner v-if='show'></banner>
    <button @click='toggle'>toggle</button>
    <div class='box'>

    </div>
  </div>

  <template id='banner'>
     <div class='demo' :style="{background:color}">
   
     </div>
  </template>
  

  Vue.component('banner',{
    data(){
      return{
        color:'skyblue'
      }
    },
    template:'#banner',
    methods: {
      changeColor(){
        console.log('變色')
        let r =parseInt(Math.random()*255)
        let g =parseInt(Math.random()*255)
        let b =parseInt(Math.random()*255)
        let a =Math.random()*255
        this.color=`rgba(${r},${g},${b},${a})`
      }
    },
    created() {
      window.addEventListener('scroll',this.changeColor)
    },
    beforeDestroy() {
      window.removeEventListener('scroll',this.changeColor)
    },
  })
    new Vue({
      el:'#app',
      data:{
        show:true
      },
      methods: {
        toggle(){
          this.show=!this.show
        }
      },
    })