Loading... <!-- wp:paragraph --> <p> vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件<strong>创建、数据初始化、挂载、更新、销毁</strong>，这就是一个组件所谓的生命周期。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>在这里借用Vue官方的一张图片</p> <!-- /wp:paragraph --> <!-- wp:image --> <figure class="wp-block-image"><img src="https://cn.vuejs.org/images/lifecycle.png" alt="Vue 实例生命周期"style=""></figure> <!-- /wp:image --> <!-- wp:heading --> <h2 id="组件创建阶段">组件创建阶段</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>init Events & lifecycle</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>初始化事件和生命周期函数</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>beforeCreate</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>创建阶段第一个生命周期函数。组件的props/data/methods尚未被创建，都处于不可以状态，在这个阶段什么都做不了</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>init injections & reactivity</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>当前阶段表示正在初始化props，data，methos</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>created</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>组件的props，data，methods已经创建好，都处于可用状态，但是模板结构尚未构成。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>通常此阶段用于调用methods方法，发起Ajax请求，并且将数据转存到data中</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Has "el" option</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>会判断是否有el选项。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>如果有el选项会走Yes判断是否有template选项。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>如果没有el选项则会调用$mount方法</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>beforeMount</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。没有什么意义</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Create vm.$el and replace "el" with it</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>用内存中编译生成的HTML结构替换掉el属性指定的DOM元素</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>mounted</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>已经把内存中的HTML结构，成功的渲染到了浏览器之中。此时浏览器中已包含了当前组件的DOM结构。最早操作DOM结构的生命周期函数。</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2 id="组件运行阶段">组件运行阶段</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p><strong>beforeUpdate</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>将要根据变化过后、最新的数据、重新渲染组件的模板结构。data的数据是最新的，但UI结构不是最新的</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>virtual DOM re-render and patch</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>根据最新的数据，重新渲染组件的DOM结构</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>updated</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>已经根据最新的数据，完成了组件DOM结构的重新渲染。此时UI结构跟data数据都是最新的</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2 id="组件销毁阶段">组件销毁阶段</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p><strong>beforeDestroy</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>将要销毁此组件，但还未销毁，组件还处于正常工作状态</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Teardown watchers,child components and event listeners</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>销毁当前组件的数组侦听器、子组件、事件监听</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>destroyed</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>组件已经被销毁，此组件在浏览器中对应的DOM结构已经被完全移除</p> <!-- /wp:paragraph --> 猜你想看 react学习-JSX（二） 每日一学：PHP 中的 `array_uintersect` 函数详解 FFmpeg 和 FFprobe 在 Linux 系统上的安装指南 nuxt3中文官网nuxt3是一个基于Vue.js的静态站点生成器和应用程序框架 vue3新特性 每日一学：PHP 中的array_search函数详解 Typecho 图片水印插件Watermark - 为你的博客图片添加专属水印 vue3中vuex对比pinia Golang语言优势和其他语言的对比 Vue侦听器 最后修改：2022 年 06 月 05 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
