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的操作了（ 可以進行第三方庫的實例化了 ）