uniapp生命周期详解

一、创建阶段

uniapp应用启动之后，首先进入创建阶段，此时会进行以下操作：

1、应用初始化，此时可以对应用进行一些基础配置，例如AppID等信息；

// main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
  ...App,
});

// 进行应用初始化
app.$mount();

2、创建vue实例，此时可以对Vue进行一些全局配置，例如自定义指令、过滤器等；

// main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

App.mpType = 'app';

// 全局注册一个自定义指令
Vue.directive('my-directive', {
  bind(el) {
    // ...
  },
  inserted(el) {
    // ...
  },
  update(el, binding) {
    // ...
  },
  componentUpdated(el) {
    // ...
  },
  unbind(el) {
    // ...
  },
});

const app = new Vue({
  ...App,
});

app.$mount();

3、创建根组件App.vue，此时可以在App.vue中进行一些全局操作，例如全局样式、全局配置等。

// App.vue

   

<script>
export default {
  created() {
    // 设置全局样式
    import './common.css';
    // 进行全局配置
    uni.setStorageSync('key', 'value');
  },
};
</script>

二、挂载阶段

在创建阶段完成后，应用进入挂载阶段，此时会进行以下操作：

1、将根组件挂载到Vue实例上，此时会触发组件的beforeMount生命周期钩子函数；

// main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
  ...App,
});

// 将根组件挂载到Vue实例上
app.$mount();

2、将Vue实例挂载到uni-app上，此时会触发组件的mounted生命周期钩子函数；

// main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
  ...App,
});

app.$mount();

// 将Vue实例挂载到uni-app上
export default {
  mpType: 'app',
  ...app,
};

3、uni-app进入后台/前台时，会触发应用的onHide/onShow生命周期函数。

// App.vue
<script>
export default {
  onHide() {
    // 应用进入后台
  },
  onShow() {
    // 应用进入前台
  },
};
</script>

三、更新阶段

应用处于运行状态，此时可能会发生数据变化，引起组件的重新渲染，此时会触发组件的beforeUpdate/updated生命周期钩子函数。

// MyComponent.vue

   

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!',
    };
  },
  mounted() {
    setTimeout(() => {
      this.message = 'Hello, world!';
    }, 1000);
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
};
</script>

四、销毁阶段

当应用关闭或者组件被销毁时，会触发组件的beforeDestroy/destroyed生命周期钩子函数。

// MyComponent.vue

   

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!',
    };
  },
  mounted() {
    setTimeout(() => {
      this.$destroy();
    }, 1000);
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  },
};
</script>

五、错误处理阶段

在运行应用的过程中，可能会出现一些错误，此时会触发组件的errorCaptured生命周期钩子函数。

// MyComponent.vue

   

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!',
    };
  },
  mounted() {
    this.$refs.nonexistent.someMethod(); // 抛出错误
  },
  errorCaptured(err, vm, info) {
    console.error(err, vm, info);
  },
};
</script>

六、小结

通过以上的阶段分析，我们可以了解到uniapp的生命周期包括创建阶段、挂载阶段、更新阶段、销毁阶段、错误处理阶段。掌握生命周期的使用，可以让我们更好地管理应用及组件的状态，提高开发效率。