浅谈vue之生命周期

拼搏现实的明天。 2022-05-09 23:03 658阅读 0赞

\*\*

## 浅谈vue之生命周期 ##

\*\*  
**环境搭建**  
在讲解vue生命周期之前我们先准备好演示环境  
搭建vue的方式一般有三种

*  是使用npm搭建集成开发环境，可参考：[https://blog.csdn.net/lizy928/article/details/81464244][https_blog.csdn.net_lizy928_article_details_81464244]
 *  引入vue.js文件，下载vue文件后和引入普通js文件一样，[https://vuejs.org/js/vue.min.js][https_vuejs.org_js_vue.min.js]
 *  第三种-使用 CDN 方法  
    以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。  
    BootCDN（国内） : [https://cdn.bootcss.com/vue/2.2.2/vue.min.js][https_cdn.bootcss.com_vue_2.2.2_vue.min.js]  
    unpkg：[https://unpkg.com/vue/dist/vue.js][https_unpkg.com_vue_dist_vue.js], 会保持和 npm 发布的最新的版本一致。  
    cdnjs : [https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js][https_cdnjs.cloudflare.com_ajax_libs_vue_2.1.8_vue.min.js]  
    本次教程采用第一种方案，在idea下打开项目后如下  
    ![在这里插入图片描述][70]  
    启动项目并访问  
    ![在这里插入图片描述][70 1]  
    ![在这里插入图片描述][70 2]  
    这里，我们在已经搭建好的vue项目中，实现一个从项目已有的Hello World! 跳转至我们自己创建的Hello Vue组件页面的。  
    ![在这里插入图片描述][70 3]

export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/TestVue',
          name: 'TestVue',
          component: TestVue
        }
      ]
    })

拷贝HelloWord文件重命名为testVue.vue文件，并在在router下的index.js文件中添加路由配置。  
打开[http://localhost:8080/\#/TestVue][http_localhost_8080_TestVue]  
接下来我们就以这个页面来讲解vue的生命周期  
首先先看看官网的图，详细的给出了vue的生命周期:  
![在这里插入图片描述][70 4]  
可以总共分为8个阶段：  
beforeCreate（创建前）,  
created（创建后）,  
beforeMount(载入前),  
mounted（载入后）,  
beforeUpdate（更新前）,  
updated（更新后）,  
beforeDestroy（销毁前）,  
destroyed（销毁后）  
![在这里插入图片描述][70 5]  
这个是vue1.0之前的钩子函数,简单来说vue的生命周期就是体现在这些钩子函数之上。  
从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。  
接下来写一点测试代码：

刷新页面，按F12可以看到  
![在这里插入图片描述][70 6]  
**create 和 mounted 相关**  
beforecreated：el 和 data 并未初始化  
created:完成了 data 数据的初始化，el没有  
beforeMount：完成了 el 和 data 初始化  
mounted ：完成挂载  
**update 相关**  
data里的值被修改后，将会触发update的操作。  
执行了destroy操作，后续就不再受vue控制了。

[https_blog.csdn.net_lizy928_article_details_81464244]: https://blog.csdn.net/lizy928/article/details/81464244
[https_vuejs.org_js_vue.min.js]: https://vuejs.org/js/vue.min.js
[https_cdn.bootcss.com_vue_2.2.2_vue.min.js]: https://cdn.bootcss.com/vue/2.2.2/vue.min.js
[https_unpkg.com_vue_dist_vue.js]: https://unpkg.com/vue/dist/vue.js
[https_cdnjs.cloudflare.com_ajax_libs_vue_2.1.8_vue.min.js]: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
[70]: /images/20220510/7315a7655aaa42919f3206f0d45e182f.png
[70 1]: /images/20220510/f298bf12b8c14350a4bb2629a9e00abc.png
[70 2]: /images/20220510/fd3a055ba5de4b0f8b7b831a3dc9cfc7.png
[70 3]: /images/20220510/f2e7c14fb99549efafbb364aa62d284e.png
[http_localhost_8080_TestVue]: http://localhost:8080/#/TestVue
[70 4]: /images/20220510/d183a8f3109541f680aab19a14befb0c.png
[70 5]: /images/20220510/f87e17952073484cbebbff6d78b51c8d.png
[70 6]: /images/20220510/b907994b5d1a4592bc8c0a813a6139a0.png