关于vue.js:Vue生命周期函数

明天小编持续和大家一起钻研 Vue，明天要一起探讨的是生命周期函数，在小编的了解中，生命周期就是在肯定工夫主动执行的函数，就相似原生 js 中的 window.onload。
小编先拷贝一张来自 Vue 官网文档中的一张图

其实在这张图中，曾经残缺的阐明了 Vue 中每个生命周期中的函数的执行工夫，然而小编还是要用代码联合正文，更加具体的阐明生命周期。

const app = Vue.createApp({data(){
    return {message: 'helllo world'}
  },
  methods:{handllItemClick(){ // 绑定点击事件。性能就是点击 DOM 元素的时候，更新 data 中的数据
      this.message = '666'
    }
  },
  // 在实例生成之前会主动执行的函数
  beforeCreate(){console.log('beforeCreate')
  },
  // 在实例生成之后会主动执行的函数
  created(){console.log('created')
  },

  // 在模板曾经被变成函数之后立刻执行的函数（在组件内容被渲染到组件之前主动执行的函数）beforeMount(){console.log(document.getElementById('root').innerHTML) // 空白
    console.log('beforeMount')
  },
  // 在组件内容被渲染到页面之后主动执行的函数
  mounted(){console.log(document.getElementById('root').innerHTML) // <div>hello world</div> 
    console.log('mounted')
  },
  // 当 data 中的函数变动会立刻主动执行的函数
  beforeUpdate(){console.log(document.getElementById('root').innerHTML) // <div>hello world</div> 
    console.log('beforeUpdate')
  },
  // 当 data 中的函数变动，同时页面实现更新后会主动执行的函数
  updated(){console.log(document.getElementById('root').innerHTML) // <div>666</div> 
    console.log('updated')
  },
  // 当 Vue 利用生效时，主动执行的函数
  beforeUnmounted(){console.log(document.getElementById('root').innerHTML) // <div>hello world</div> 
    console.log('beforeUnmounted')
  },
  // 当 Vue 利用生效时，且 data 数据齐全销毁（DOM 齐全销毁）之后，主动执行的函数
  unmounted(){console.log(document.getElementById('root').innerHTML) // 空白    console.log('unmounted')
  },
  template: '<div v-on:click="handllItemClick">{{message}}</div>'
})
const vm  = app.mount('#root')

至于生命周期在理论我的项目中的应用，每个生命周期适宜做哪些事件，小编会在今后的文章陆续更新，明天的目标就是要和生命周期函数混个脸熟。一起加油！
大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈