[JavaScript知识库]vue的生命周期

生命周期：
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期函数=生命周期事件=生命周期钩子

vue生命周期：
1、beforeCreate()
初始化了一个空的Vue实例对象，data和methods中的数据还没有初始化。
一般用于页面重定向
2、created()
data和methods中的数据初始化好了，最早可以在此周期内调用methods中的方法或data中的数据。
一般用于接口请求和数据初始化
3、beforeMount()
内存中的虚拟DOM已经形成，但是好没有挂载到页面中。
4、mounted()
已经将DOM元素挂载到页面中，最早可以在此周期内操作DOM元素。
5、beforeUpdate()
元素更新之前，此时页面中的数据还是旧的，而data的数据是新的，尚未同步。
6、updated()
元素更新之后，此时页面和data中的数据都是新的。
7、beforeDestroyed()
销毁之前，实例中的数据还处于可用状态。
一般用于清除定时器和监听等
8、destroyed()
销毁之后，实例中的所有数据都不可以用
beforeUpdate()和updated()可以执行0-多次，其余生命周期函数只可以执行一次。

<div id='app'>
    <div>{{msg}}</div>
    <input type="text" v-model="msg">
  </div>
  <script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg:'hello world!'
    },
    methods: {
    },
    // 生命周期
    // 创建之前，初始化尚未完成
    beforeCreate(){
      console.log('beforeCreate');
      console.log('msg：'+this.msg);
    },
    // 创建之后，第一个可以操作data数据的生命周期
    created(){
      console.log('created');
      console.log('msg:：'+this.msg);
    },
    // 挂载之前，页面元素尚未更新
    beforeMount(){
      console.log('beforeMount');
    },
    // 挂载之后，可以操作dom元素
    mounted(){
      console.log('mounted');
    },
    // 元素更新之前 可执行0-多次
    beforeUpdate(){
      console.log('beforeUpdate');
    },
    // 元素更新之后
    updated(){
      console.log('updated');
    },
    beforeDestroy(){
      console.log(beforeDestroy);
    },
    destroyed(){
      console.log(destroyed);
    }
  })
  </script>