【Web】【Android】Vue和Android生命周期对比

Vue.js 和 Android 都是常用的前端和移动开发框架（Android这个东西在讲系统的时候是个系统，讲框架的时候是个框架），它们都提供了生命周期（Lifecycle）机制来管理组件或 Activity 的状态。以下是 Vue.js 组件生命周期和 Android Activity 生命周期的详细对比：

创建阶段

Vue.js 组件的创建阶段包括 beforeCreate、created、beforeMount 和 mounted 四个生命周期钩子。
beforeCreate 刚被创建、未初始化
created 已经完成数据的初始化，
beforeMount 将要挂载到页面上，
mounted 已经挂载到页面上。

Android Activity 的创建阶段包括 onCreate()、onStart()、onResume() 三个生命周期方法。
onCreate() 表示 Activity 被创建了，但视图还没有加载，
onStart() 表示页面即将可见，
onResume() 表示 Activity 变为前台并获得用户焦点。

运行阶段

Vue.js 组件的运行阶段包括 beforeUpdate、updated 两个生命周期钩子。
beforeUpdate 表示数据即将更新，但页面还未渲染，
updated 表示数据已经更新，且页面已经渲染完毕。

Android Activity 的运行阶段包括 onPause()、onStop()、onRestart() 三个生命周期方法。
onPause() 表示 Activity 即将不再可见，但它仍在前台，
onStop() 表示 Activity 完全不可见，即退到后台，但未被销毁，
onRestart() 表示 Activity 重新被唤醒。

销毁阶段

Vue.js 组件的销毁阶段包括 beforeDestroy 和 destroyed 两个生命周期钩子。
beforeDestroy 表示组件即将销毁，
destroyed 表示组件已经销毁。

Android Activity 的销毁阶段包括 onDestroy() 生命周期方法，表示 Activity 要被销毁。

Android 示例

class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)Log.d("Activity", "onCreate")}override fun onStart() {super.onStart()Log.d("Activity", "onStart")}override fun onResume() {super.onResume()Log.d("Activity", "onResume")}override fun onPause() {super.onPause()Log.d("Activity", "onPause")}override fun onStop() {super.onStop()Log.d("Activity", "onStop")}override fun onDestroy() {super.onDestroy()Log.d("Activity", "onDestroy")}}

Vue.js 示例

<template><div><p>{{ message }}</p><button @click="changeMessage">Change Message</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue.js!'}},mounted() {console.log('mounted')},methods: {changeMessage() {this.message = 'New message!'}},beforeDestroy() {console.log('beforeDestroy')},destroyed() {console.log('destroyed')}
}
</script><style scoped>
p {font-size: 24px;
}
button {margin-top: 16px;padding: 8px;
}
</style>

在这个示例中，我们定义了一个简单的组件，包括一个显示消息的段落和一个按钮。在组件的 data() 方法中定义了 message 数据，用来控制消息的显示。在 mounted() 生命周期钩子中输出日志，表示该组件已经挂载到页面上。在 methods 中定义了一个方法 changeMessage()，当点击按钮时，会触发这个方法，从而改变消息的内容。同时，在 beforeDestroy() 和 destroyed() 生命周期钩子中分别输出日志，表示组件即将被销毁和已经被销毁。

比较

通过以上两个示例，我们可以看出两者的异同之处：

相同点：Android 和 Vue.js 都提供了一套完整的生命周期机制，开发者可以在不同生命周期阶段中加入相应的逻辑，以达到管理状态和控制界面的目的。

不同点：在代码中的具体实现上，Android 和 Vue.js 有一些不同的细节。例如，Android 的生命周期方法是预定义的，而 Vue.js 的生命周期钩子是组件特定的；Android 的生命周期方法中，onCreate()、onStart() 和 onResume() 是必须定义的，而 Vue.js 的生命周期钩子则可以根据需要自由组合；在实际应用中，两者的适用场景和使用方式也会存在一定差异。