前言
生命周期函数是必要的，有了生命周期函数可以大大简化我们的操作，可以做一些我们平时做不到的事，本篇文章对声明周期函数做一个简要的介绍，并使用一个实例告诉大家，生命周期函数的重要性。
简介生命周期函数
1.又名：生命周期回调函数、生命周期钩子。
2.Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
下图来源张天禹老师。
都有哪些生命周期函数
注意点：
- 常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
- 关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
其余生命周期钩子及作用：
// 初始化数据代理、数据检测之前（在这看不到_data等属性，很多属性并未初始化、一般为null） beforeCreate() { console.log('beforeCreate') }, // 创建完数据代理、数据检测之后执行（在这可以看到_data等属性，很多属性完成初始化） created() { console.log('created') }, // 这个函数执行的时候Dom元素还是没经过vue编译的元素，在这个函数中对dom元素操作最终都不奏效 beforeMount() { console.log('beforeMount') }, // dom中的元素经过了vue对象编译，这个函数中所有的操作均奏效。 mounted() { console.log('mounted') }, // 数据更新前的操作（此时数据更新之后还没有同步到dom中） beforeUpdate() { console.log('beforeUpdate') }, // 数据更新后的操作 updated() { console.log('updated') }, // 销毁前执行的函数（在这里面执行的修改将不起作用，但是依旧可用） // 使用vue.$destroy()销毁vue对象 beforeDestroy() { console.log('beforeDestroy') }, //已销毁 destroyed() { console.log('destroyed') }, //下面两个钩子是组件激活与失活钩子（组件不展示的话会被销毁掉） activated() { console.log('News组件被激活了') this.timer = setInterval(() => { console.log('@') this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 },16) }, //组件失活可以进行关闭定时器等操作 deactivated() { console.log('News组件失活了') clearInterval(this.timer) },
为什么要有生命周期函数
假设现在要实现一个效果，当页面挂载完毕后页面内的文字由不透明转向透明，实现的方式是通过定时器实现，如果不使用生命周期函数，而使用普通函数，将会导致无限开启定时器，因为定时器定义在函数内，而我们调用函数需要在模板内，定时器修改数据之后会触发模板解析，模板解析后会再次触发一个定时器。周而复始，将会开启很多定时器。如果在DOM元素挂载完毕后的声明周期函数内开启定时器，只会开启一个，而且定时器改变数据之后触发模板解析不会再开启新的定时器。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>引出生命周期</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 v-if="a">你好啊</h2> <h2 :style="{opacity}">欢迎学习Vue</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ a:false, opacity:1 }, methods: { // 可以通过创建一个函数，并在模板中调用函数的方式进行实现 // 但是这种方法会使函数分裂执行，函数增长应为指数级 // 原因是函数中涉及到了模板中属性的修改，修改之后vue对象会在此更新并解析模板， // 模板就又一次调用函数，如此反复使得定时器函数执行的次数超级超级多（也就是同时存在很多个定时器函数在运行） }, //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted mounted(){ console.log('mounted',this) setInterval(() => { this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 },16) }, }) //通过外部的定时器实现（不推荐） /* setInterval(() => { vm.opacity -= 0.01 if(vm.opacity <= 0) vm.opacity = 1 },16) */ </script> </html>
