uniapp生命周期函数详解

一、beforeCreate

1、描述：在实例初始化之后，数据观测和event/watcher事件配置之前被调用。

2、使用场景：在该生命周期内无法访问vm实例上的$data、$props、$refs、$parent和$children等属性。

3、代码示例：

<template>
  <div v-if="isReady">
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeCreate () {
    	console.log('beforeCreate')
    },
    data() {
      return {
        isReady: true,
        message: 'hello world'
      }
    }
  }
</script>

二、created

1、描述：在实例创建完成后立即被调用。根实例、组件的数据绑定、计算属性、watch/event等已经完成初始化，可以访问到$data、$props、$refs、$parent和$children等属性。

2、使用场景：在该生命周期内可以拿到$el选项，但是不能保证子组件完全被渲染。如果想保证子组件都已经被渲染至DOM，可以使用vm.$nextTick()

3、代码示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    created () {
      console.log('created')
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

三、beforeMount

1、描述：在模板编译/挂载之前被调用。

2、使用场景：在该生命周期内可以访问$template选项，并且该DOM还没有被渲染或被挂载到HTML文档中。

3、代码示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeMount () {
      console.log('beforeMount')
    },
    mounted() {
      console.log('mounted')
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

四、mounted

1、描述：在布局和文件的位置时，mounted在编写复杂组件或插件时很有用。

2、使用场景：在该生命周期内，该vm实例已经被渲染到界面上。$el为其对应的真实DOM，并且可以进行DOM操作。

3、代码示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    mounted () {
      console.log('mounted')
      this.$el.addEventListener('click', this.handleClick)
    },
    methods: {
      handleClick() {
        console.log('click')
      }
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

五、beforeUpdate

1、描述：在数据更新之前被调用，发生在虚拟DOM比对更新之前，可以在该生命周期内进行数据的修改。

2、使用场景：在该生命周期内可以访问vm实例上的$data、$props数据。无法访问$el，因为此时还未更新。

3、代码示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeUpdate () {
      console.log('beforeUpdate')
      this.message = 'updated!'
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

六、updated

1、描述：在重新渲染后调用，发生在虚拟DOM比对更新之后，可以访问更新后的DOM。

2、使用场景：在该生命周期内可以访问vm实例上的$data、$props数据以及更新后的$el DOM。

3、代码示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    updated () {
      console.log('updated')
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

七、beforeDestroy

1、描述：在实例销毁之前调用。在这一步，实例仍然完全可用。

2、使用场景：在该生命周期内，可以进行一些清理工作，如清除定时器、解绑事件等操作。

3、代码示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeDestroy () {
      console.log('beforeDestroy')
      clearInterval(this.interval)
      this.$el.removeEventListener('click', this.handleClick)
    },
    data() {
      return {
        message: 'hello world',
        interval: null
      }
    },
    mounted() {
      this.interval = setInterval(() => {
        console.log('interval')
      }, 1000)
      this.$el.addEventListener('click', this.handleClick)
    },
    methods: {
      handleClick() {
        console.log('click')
      }
    }
  }
</script>

八、destroyed

1、描述：在实例销毁之后调用。该钩子被调用时，Vue实例已经解除了该实例所有的监听器和删除了所有的DOM绑定。该钩子跟踪该实例，从而可以在实例销毁后执行异步操作或发送分析数据。

2、使用场景：在该生命周期内无法访问vm实例上的$data、$props、$refs、$parent和$children等属性。

3、代码示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeDestroy () {
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    },
    data() {
      return {
        message: 'hello world',
        interval: null
      }
    },
    mounted() {
      this.interval = setInterval(() => {
        console.log('interval')
      }, 1000)
    }
  }
</script>