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里面声明，如果不声明就会报错
