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