前端-Vue的生命周期 day03

生命周期

生命周期函数=生命周期事件=生命周期钩子

一、什么是生命周期

从vue实例创建、运行到销毁期间，总是伴随各种各样的事件，这些事件，统称生命周期！

1、 beforeCreate

创建之前，data和methods中的数据还没有初始化，获取不到data和methods中的数据

作用：页面重定向

beforeCreate(){
  console.log('beforeCreate')
    // beforeCreate
  console.log(this.msg)
    // undefined
}

2、created

创建之后，data和methods中的数据已经初始化

作用：数据初始化，接口请求

created() {
    console.log('created')
    // created
    console.log(this.msg)
    // hello
  }

3、beforeMount

虚拟dom挂载 获取不到dom元素

beforeMount(){
    console.log('beforeMount')
    //beforeMount
    console.log(this.msg)
    //hello
  }

4、mounted

创建之后 真实的dom

作用：第一个可以操作dom元素的生命周期

mounted() {
    console.log('mounted')
    //mounted
    console.log(this.msg)
    //hello
  }

5、beforeUpdate

更新之前，data中的数据是最新的，页面中的数据是旧的，还未保持同步

beforeUpdate() {
  console.log('beforeUpdate')
  // beforeUpdate
  console.log(this.msg)
  // hello
}

6、updated

更新之后，data和页面中的数据都是最新的

 updated() {
    console.log('update')
    //update
    console.log(this.msg)
    //hello
  }

7、beforeDestory

作用：清空定时器和页面监听

beforeDestroy() {
    console.log('beforeDestroy')
    console.log(this.msg)
  }

8、destroyed

销毁之后

 destroyed() {
    console.log('destroyed')
     console.log(this.value)
  }