Vue-生命周期

VUE vue

创建时间:2019-12-14 15:59

字数:450 阅读:

生命周期钩子函数

生命周期钩子函数

生命周期分为三大阶段: 初始化、更新显示、销毁实例

初始化阶段的钩子函数

beforeCreate()实例创建之前: 数据和模板均为获取到
create()实例创建后：最早可访问的数据，但模板并未获取到
beforeMount()数据挂载前， 模板已经获取到但数据为挂载到模板中
mounted()数据挂载后，数据已经挂载在模板中

更新阶段的钩子

1 2	beforUpdate() 模板更新前： data改变后，更新模板数据前的调用 update() 模板更新后：数据已经挂到模板中

销毁阶段的钩子

1 2	beforDestroy()实例销毁之前 destroyed()实例销毁后

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h1>{{msg}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
      // el: '#app',
      data: {
          msg: 'XiaoxIN'
      },
      beforeCreate(){
          // Vue实例创建前被调用，数据和模板均为获取到
          console.log('beforeCreate()', this.$el, this.$data)
      },
      created(){
          // Vue实例化之后最早可以获取到data数据的钩子， 但模板未获取到
          // 建议ajax请求
          console.log('created()', this.$el, this.$data)
      },
      beforeMount(){
          // 数据挂载之前，获取到模板，但是数据还未挂载到模板上
          console.log('beforeMount()', this.$el, this.$data)
      },
      mounted() {
          // 数据已经挂载在模板中
          console.log('Mount()', this.$el, this.$data)
      },
      beforeUpdate(){
          // 当data数据在更新之后，去更新模板中的数据前调用
          console.log('beforeUpdate()', this.$el.innerHTML, this.$data)
      },
      updated(){
          //
          console.log('updated()', this.$el.innerHTML, this.$data)
      },
      beforeDestroy(){
          console.log('beforeDestroy()')
      },
      destroyed(){
          console.log('destroyed()')
      }
  }).$mount('#app') // 如果实例中没有el元素可以使用$mount()手动指定dom元素
  // vm.$destroy()
</script>
</body>
</html>
</html>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com