vue生命週期（上）

最近開始使用vue了，發現之前還沒有寫過關於vue生命週期的博客，今天先來聊聊：

簡單來說：就是創建前—>創建後——>掛載前——>掛載後——>更新前——>更新後——>卸載前——>卸載後

這次先說一下關於創建（create  和掛載mount）也就是前4個生命週期

<template>
  <div>
      <p>{{msg}}</p>
      <button @click="test">test</button>
      <hr>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '生命週期？？？'
    }
  },
//el  指的是元素
//data  值的是數據
  beforeCreate () {
    console.log(1);//1
    console.log(this.$el);//undefined
    console.log(this.$data)//undefined
  },
  created () {
    console.log(2);//2
    console.log(this.$el)//undefined
    console.log(this.$data)//初始化
  },
  beforeMount () {
    console.log(3);//3
    console.log(this.$el);//undefined
    console.log(this.$data);//初始化
  },
  mounted () {
    console.log(4);//4
    console.log(this.$el);//初始化
    console.log(this.$data);//初始化
    // this.$router.push('/')
  },
  methods: {
    test () {
      console.log('lalala')
    }
  }

}
</script>

<style>

</style>