Vue生命周期--四大阶段--8个钩子之mounted钩子的渲染

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钩子中渲染

- 根据数据试试更新饼图 echarts.setOptions({...})