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
        }
      },
    })