22 生命周期
又名：生命周期回调函数，生命周期函数，生命周期钩子
所谓的生命周期就是指vue的一些特殊的函数，只不过这些函数vue会在关键的时刻去调用
22.1 引出生命周期
生命周期图示
想要学习研究最完整的生命周期，应该参考vue官网提供的生命周期图，
虽然图很长，但是需要我们用到的钩子就那几个
编写案例
通过案例引入说明
需求：展示一串文字，初始化的时候透明度为1，随后透明度越来越低
js定时器实现
首先使用js定时器实现
虽然实现了效果，但是不完美
为什么不完美呢？因为现在的代码好像被割裂开一样，不能被vue全部使用，而是在vue外面又写了定时器控制vue元素
这时候就要说下mounted(挂载)函数了
mounted(挂载)函数
调用时机：vue完成模板的解析并且把初识的真实DOM元素放入页面后(挂载完毕)调用mounted
vue默认维护mounted中的this是vue实例对象或者组件实例对象
加入mounted函数后继续查看效果，也是没问题的
相关代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- style绑定，需要写入键值对的格式，如果键值一样，可以只写键 --> <h2 :style="{opacity}">欢迎学习vue</h2> </div> </body> <script type="text/javascript"> const vm= new Vue({ el:'#root', data:{ opacity:1 }, methods:{ }, // 调用时机：vue完成模板的解析并且把初识的真实DOM元素放入页面后(挂载完毕)调用mounted mounted() { setInterval(() => { // 视觉美观设置的参数 vm.opacity-=0.01 // 如果透明度消失了就重新设置为1 if(this.opacity<=0){ this.opacity=1 } }, 16); }, }) </script> </html>
总结
- 生命周期：
- 1 又名：生命周期回调函数，生命周期函数，生命周期钩子
- 2 是什么：Vue在关键时刻帮助我们调用的一些特殊的函数
- 3 生命周期函数的名字不可更改，但是函数的具体内容是程序员根据需求编写的
- 4 生命周期函数中的this只指向的是vm或者组件实例对象
22.2 生命周期总结
挂载流程是整个生命周期最长的流程
哪个钩子中会导致生命周期和数据尚未保持同步：beforeUpdate函数
vue有8个生命周期，也可以说4对生命周期
1 beforeCreate,created(创建之前,创建完毕)这里的初始化不是指的vm实例，而是数据检测，数据代理
2 beforeMount,mounted(挂载之前，挂载完毕)
3 beforeUpdate,updated(修改之前，修改完毕))
4 beforeDestory,destoryed(销毁之前，销毁完毕)):销毁的时候就要做一些收尾的事情，比如关闭定时器，取消订阅等
23 对组件的理解
在vue中，组件是有两种编写格式的，第一种格式叫非单文本组件，第二种格式叫单文本组件
非单文本组件：一个文件中含有多个组件，也叫多文本组件，比如demo.html里面包含js,css...
单文本组件（使用较多）：一个文件中只有1个组件，一个文件只有一个组件，是一一对应的,比如demo.vue
组件的本质就是构造函数
理解：用来实现局部（特定）功能效果的代码集合（js，css，html，image,mp3,zip...）
为什么：一个界面的功能很复杂
作用：复用编码。简化项目编码，提供运行效率
