「Vue.js开发连载十五」生命周期
Posted 卓象程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了「Vue.js开发连载十五」生命周期相关的知识，希望对你有一定的参考价值。
象妹精心整理Vue.Js教程
第十五弹，来袭小伙们请收好！
更多技术知识请关注“卓象程序员”！
Vue.Js
上一篇文章讲解“观察者”，本篇文章讲解“生命周期”。
每个Vue实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到DOM、在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
生命周期一共有八个阶段，下面用实例进行理解。
新建lifecycle.html文件：
浏览器访问：
1. 创建与挂载
DOM结构与数据已渲染输出，看一下控制台输出的vue对象实例化输出情况。
2. 更新
以上是beforeCreate、created、beforeMount、mounted情况，修改input框内数据，当数据改变时，触发beforeUpdate与updated。
注意
1. this.$el是一个对象，相当于一个指针，因此当你使用console.log输出之后，其内容并没有真正显示，而当你点开下面的箭头展开具体内容时，显示的是该指针指向对象的当前内容，因此在你看来beforeUpdate与updated两个都一样。当输出真正的DOM结构时才能看出来。
3. 销毁
点击页面中“销毁”按钮，调用销毁函数，测试销毁前后的情况。
注意：
1. 销毁是销毁对象中的方法，跟数据无关。
2. created 我们一般把ajax请求数据的代码放到这个阶段。
3. beforeMount 这个阶段主要是提前控制元素的样式，防止闪动。
4. mounted 一般针对第三方的插件初始化都放在这里，比如swiper.js
Vue.js连载为卓象程序员原创，转载请联系卓象程序员
关注卓象程序员，定期发布技术文章
下一篇讲解“浏览器安装vue插件”
报名卓象免费训练营课程
学习最新热门IT技术
找一份自己满意的高薪工作
7天免费学习，不要钱！！！
★ 零基础，随时体验
★ 免费试听，满意后再报名
★ 小班授课，学习氛围浓厚
★ 口碑相传，80%学员来自口碑推荐
★ 教学严管，闯关式学习保障学习效果
★ 公司地点，哈尔滨市宣化街480号4楼
以上是关于「Vue.js开发连载十五」生命周期的主要内容，如果未能解决你的问题，请参考以下文章