Vue组件的生命周期是怎样的？

Each Vue 3 component has its own lifecycle, and each life cycle stage has its own method. If the given stage of thelife cycle is reached and if the method is defined in the component, the methodwill be run.

每个 Vue 3 组件都有自己的生命周期，每个生命周期阶段都有自己的方法。如果达到了生命周期的给定阶段，且该组件中定义了该方法，则将运行该方法。

Right after the app is mounted withapp.mount(), the events and life cycle are initialized. The first method thatwill be run when the component is being loaded is the beforeCreate() method.Then, the components are initialized with the reactive properties. Then, thecreated() method is run. Since the reactive properties are initialized at thisstage, we can access the reactive properties in this method and the methodsthat are loaded after this one.

使用 app.mount() 挂载应用程序后，事件和生命周期就会被初始化。加载组件时运行的第一个方法是 beforeCreate() 方法。然后，使用反应属性初始化组件。然后，运行created() 方法。由于反应属性是在这个阶段初始化的，所以我们可以在这个方法中访问反应属性，也可以在这个方法之后加载的方法中访问反应属性。

Then, the component’s template or renderfunctions are run to render the items. Once the content is loaded, beforeMountis run. Once beforeMount is run, the app will be mounted into the element thatwe specified with the selector we passed into the app.mount() method.

然后，运行组件的模板或呈现函数来呈现item。加载内容后，运行 beforeMount。运行 beforeMount 后，应用程序将被加载到我们通过 app.mount() 方法传递的选择器指定的元素中。

Once the app is mounted into the element,the mounted hook is run. Now, when any reactive property changes, thebeforeUpdate hook is run. Then, the virtual DOM is rerendered, and the latestitems are rendered from the latest values of the reactive properties. It is agood place to run any initialization code for outside libraries. Once that isdone, the updated hook is run.

一旦应用被挂载到元素中，就会运行挂载钩子。现在，当任何反应式属性发生变化时，就会运行beforeUpdate 钩子。然后，虚拟 DOM 将重新渲染，最新的项目将根据反应式属性的最新值进行渲染。这是运行外部库初始化代码的好地方。一旦完成，就会运行updated()钩子。

总结：beforeCreate() -> created() ->beforeMount() -> beforeUpdate() -> updated().