VUE常用的鈎子函數

beforeCreate

這個時候，this變量還不能使用，在data下的數據，和methods下的方法，watcher中的事件都不能獲得到；

 beforeCreate() { console.log(this.page); // undefined console.log{this.showPage); // undefined }, data() { return { page: '第一頁' } }, methods: { showPage() { console.log(this.page); } } 

created

這個時候可以操作vue實例中的數據和各種方法，但是還不能對"dom"節點進行操作；

  ..., created() { let btn = document.querySelector('button') console.log(btn.innerText) //此時找不到button節點，打印不出來button的值 } 

mounted

這個時候掛載完畢，這時dom節點被渲染到文檔內，一些需要dom的操作在此時才能正常進行。
注意：mounted在整個實例的生命周期中只執行一次。

  ..., mounted() { let btn = document.querySelector('button') console.log(btn.innerText) //此時可以打印出來button的值 } 

computed

是把所有需要依賴其他值計算的值寫成對象的key值。

  data() { return { count: 1 } }, computed: { //是最后需要計算的值，而這個值依賴this.count //那么這個值要寫在對象的key值的位置 countDouble: { get: function() { return this.count * 2 }, set: function(newValue) { this.countDouble = newValue } } } 

這時候模板渲染的{{countDouble}}這個值是2

注意：通過計算的countDouble這個變量不需要在data里面聲明，如果聲明了就會報錯

watch

把監聽的值寫成對象的key值

 data() { return { count: 1 } }, watch: { count: (val, oldVal) => { console.log('new: %s, old: %s', val, oldVal) } } 

這時候如果this.count發生了改變，那么監聽count變量發生變化的function就會被執行

注意：需要監聽的這個變量需要在data里面聲明，如果不聲明就會報錯