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

作者：风不会停7
链接：https://www.jianshu.com/p/8314ccd03fa9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。