beforeCreate
這個時候，this變量還不能使用围段，在data下的數(shù)據(jù)绳匀，和methods下的方法，watcher中的事件都不能獲得到烫止；
beforeCreate() {
console.log(this.page); // undefined
console.log{this.showPage); // undefined
},
data() {
return {
page: '第一頁'
}
},
methods: {
showPage() {
console.log(this.page);
}
}
created
這個時候可以操作vue實例中的數(shù)據(jù)和各種方法蒋荚，但是還不能對"dom"節(jié)點進(jìn)行操作；
...,
created() {
let btn = document.querySelector('button')
console.log(btn.innerText) //此時找不到button節(jié)點馆蠕，打印不出來button的值
}
mounted
這個時候掛載完畢期升，這時dom節(jié)點被渲染到文檔內(nèi)惊奇，一些需要dom的操作在此時才能正常進(jìn)行。
注意：mounted在整個實例的生命周期中只執(zhí)行一次吓妆。
...,
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
把監(jiān)聽的值寫成對象的key值
data() {
return {
count: 1
}
},
watch: {
count: (val, oldVal) => {
console.log('new: %s, old: %s', val, oldVal)
}
}
這時候如果this.count發(fā)生了改變祖秒，那么監(jiān)聽count變量發(fā)生變化的function就會被執(zhí)行
注意：需要監(jiān)聽的這個變量需要在data里面聲明，如果不聲明就會報錯
