vue中的生命周期（一）-初始化

生命周期

Vue的生命周期分为三个阶段，分别为： 初始化，运行中， 销毁，一共8个钩子函数
注意： 生命周期钩子函数不允许写成箭头函数

1.什么是生命周期？

vue中的生命周期指的是 组件 从创建到销毁的一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）

2. 生命周期的作用？

因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途

3.这个生命周期是谁的生命周期？

组件

初始化

初始化是生命周期的第一个阶段，我们就以相亲来举例子

<div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div>
      <p> {{ msg }} </p>
    </div>
  </template>

beforeCreate ------------ 相亲准备前（ 爸妈准备， 你根本是局外人 ）

 Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
    beforeCreate () {
      console.log('1-beforeCreate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))

      // fetch('./data.json')
      //   .then( res => res.json())
      //   .then( data => this.msg = data )
      //   .catch( error => console.log( error ))
    }
  })
  new Vue({
	el:'#app'
})

执行结果：

1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
2. 数据没有获得，真实dom也没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行一次
created ------------ 爸妈告诉你了，这边有几个备选， 选一个吧

 Vue.component('Hello',{
        template:'#hello',
        data(){
            return {
                msg:'hello 相亲了'
            }
        },
        beforeCreate(){
            console.log('1-beforeCreate')
            console.log('data',this.msg)
            console.log('真实dom',document.querySelector('p'))
            fetch('data.json')
            .then(res=>res.json())
            .then(data=>this.msg=data)
            .catch(error=>console.log(error))
        },
        created(){
            console.log('2-created')
            console.log('data',this.msg)
            console.log('真实dom',document.querySelector('p'))
            // fetch('data.json')
            // .then(res=>res.json())
            // .then(data=>this.msg=data)
            // .catch(error=>console.log(error))
        }
       })
    new Vue({
        el:'#app'
    }) 

执行结果：
1. 组件创建结束
2. 数据得到了，真实dom没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行了一次
beforeMount ----------- 互相加一个微信，先聊天

  Vue.component('Hello',{
        template:'#hello',
        data(){
            return {
                msg:'hello 相亲了'
            }
        },
        beforeCreate(){
            console.log('1-beforeCreate')
            console.log('data',this.msg)
            console.log('真实dom',document.querySelector('p'))
            fetch('data.json')
            .then(res=>res.json())
            .then(data=>this.msg=data)
            .catch(error=>console.log(error))
        },
        created(){
            console.log('2-created')
            console.log('data',this.msg)
            console.log('真实dom',document.querySelector('p'))
            // fetch('data.json')
            // .then(res=>res.json())
            // .then(data=>this.msg=data)
            // .catch(error=>console.log(error))
        },
        beforeMount(){
            console.log('3-beforeMount')
            console.log('data',this.msg)
            console.log('真实dom',document.querySelector('p'))
            fetch('data.json')
            .then(res=>res.json())
            .then(data=>this.msg=data)
            .catch(error=>console.log(error))
        }
        })
    new Vue({
        el:'#app'
    })

执行结果：

1. 组件挂载前
2. 任务： 判断el 判断 template
   如果el没有，那么我们需要手动挂载，如果有，那么判断template
   如果template有，那么进行render函数
   如果template没有，那么通过 outerHTML 手动书写模板
3. 数据可以获得，但是真实dom还没有渲染
4. 可以进行数据请求，也提供了一次数据修改的机会
5. 执行一次
   mounted ------------ 见面

 Vue.component('Hello',{
        template:'#hello',
        data(){
            return {
                msg:'hello 相亲了'
            }
        },
        beforeCreate(){
            console.log('1-beforeCreate')
            console.log('data',this.msg)
            console.log('真实dom',document.querySelector('p'))
            //fetch('data.json')//这里的json文件是自己虚拟的数据
            //.then(res=>res.json())
            //.then(data=>this.msg=data)
            //.catch(error=>console.log(error))
        },
        created(){
            console.log('2-created')
            console.log('data',this.msg)
            console.log('真实dom',document.querySelector('p'))
            // fetch('data.json')//这里的json文件是自己虚拟的数据
            // .then(res=>res.json())
            // .then(data=>this.msg=data)
            // .catch(error=>console.log(error))
        },
        beforeMount(){
            console.log('3-beforeMount')
            console.log('data',this.msg)
            console.log('真实dom',document.querySelector('p'))
            // fetch('data.json')//这里的json文件是自己虚拟的数据
            // .then(res=>res.json())
            // .then(data=>this.msg=data)
            // .catch(error=>console.log(error))
        },
        mounted () {
        console.log('4-mounted')
        console.log('data',this.msg)
        console.log('真实dom',document.querySelector('p'))
        fetch('./data.json')  //这里的json文件是自己虚拟的数据
      .then( res => res.json())
      .then( data => this.msg = data )
      .catch( error => console.log( error ))
        }
    })
    new Vue({
        el:'#app'
    })

执行结果：

1. 组件挂载结束
2. 数据获得了，真实dom也获得了
3. 可以进行数据请求，也就可以修改数据
4. 执行了一次
5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）