Vue生命周期：一个Vue实例从创建到销毁的整个过程。
生命周期四个阶段：创建(响应式数据)->挂载(渲染模板)->更新(修改数据，更新视图)->销毁(销毁实例)
eg:
const app = new Vue({
el: '#app',
data: {
number: 33
},
//1.创建阶段(准备数据)
beforeCreate(){//创建之前，还不能发送初始化的请求
},
created(){//创建之后，可以发送
},
//2.挂载阶段(渲染模板)
beforeMount(){
},
mounted(){//开始操作dom
},
//3.更新阶段(修改数据->更新视图【才会触发这个阶段】)
beforeUpdate(){
},
updated(){
},
//卸载阶段
beforeDestroy(){//释放Vue以外的资源(清除定时器，延时器...)
},
destroyed(){
}
})案例——记事本！
1.成果展示
2.需求：商品的添加与删除；价格超过500标红；统计计算总消费；消费账单使用饼图展示
3.思路分析：
（1）.基本渲染
- 立刻发送请求获取数据 created
- 拿到数据，存到data的响应式数据中
- 结合数据，进行渲染 v-for
- 消费统计 —> 计算属性
（2）.添加功能
- 收集表单数据 v-model；使用指令修饰符处理数据
- 给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
- 请求成功后，对文本框内容进行清空
- 重新渲染列表(把created内容封装成方法)
（3）.删除功能
- 注册点击事件，获取当前行的id
- 根据id发送删除请求
- 需要重新渲染
（4）.饼图渲染
- 初始化一个饼图 echarts.init(dom) dom需要在mounted钩子中渲染文章来源：https://www.toymoban.com/news/detail-803102.html
- 根据数据试试更新饼图 echarts.setOptions({...})文章来源地址https://www.toymoban.com/news/detail-803102.html
到了这里，关于Vue生命周期--四大阶段--8个钩子之mounted钩子的渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
