vue的生命周期钩子函数

vue的生命周期钩子函数

所有的生命周期钩子自动绑定this到上下文实例中，因此可以访问数据对property和方法进行运算，这意味着不蹦使用箭头函数来定义一个生命周期方法。参考官方文档，生命周期图

生命周期钩子一共有十一个，这里只写八个

 

  1. <template>
  2.   <div></div>
  3. </template>
  4. <script>
  5. export default {
  6.   //生命周期函数就是vue实例再某一时间点会自动执行的函数
  7.   data() {
  8.     return {}
  9.   },
  10.   components: {},
  11.   methods: {},
  12.   beforeCreate() {
  13.     console.log('beforecreate')
  14.   },
  15.   created() {
  16.     console.log('created')
  17.   },
  18.   beforeMount() {
  19.     //被执行时页面还没有被渲染
  20.     console.log(this.$el)
  21.     console.log('beforeMount')
  22.   },
  23.   mounted() {
  24.     //被执行的时候页面已经被渲染完毕了
  25.     console.log(this.$el)
  26.     console.log('mounted')
  27.   },
  28.   beforeDestroy() {
  29.     //当组件被销毁时才会触发
  30.     console.log('beforeDestory')
  31.   },
  32.   destroyed() {
  33.     //当组件被完全销毁时会触发
  34.     console.log('detory')
  35.   },
  36.   beforeUpdate() {
  37.     //当数据发生改变还没被重新渲染之前执行
  38.     console.log('beforeUpdate')
  39.   },
  40.   updated() {
  41.     //当数据发生改变被重新渲染之后执行
  42.     console.log('updated')
  43.   }
  44. }
  45. </script>

 

版权声明：本文为vivin-echo原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/vivin-echo/p/13878698.html