懂个锤子Vue 生命周期

已于 2024-07-23 12:28:45 修改
阅读量255 收藏 11
点赞数 6
文章标签： vue.js 前端 javascript echarts 工程化
于 2024-07-23 12:28:09 首次发布
WSM
本文链接：https://blog.csdn.net/qq_45542380/article/details/140632631
版权

Vue生命周期：

紧跟前文，目标学习Vue2.0——3.0： 懂个锤子Vue、WebPack5.0、WebPack高级进阶 涉及的技术栈…

当然既然学习框架的了，HTML+CSS+JS三件套必须的就不说了： JavaScript 快速入门

Vue.js 的生命周期是指从组件实例创建到销毁的整个过程：

这个过程分为四个阶段：创建——挂载——更新——销毁 每个阶段都有相应的生命周期钩子函数；

创建阶段： 准备数据)

  • beforeCreate： 在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用；

    在这个阶段，数据是获取不到的，并且真实dom元素也是没有渲染出来的

  • created： 实例创建完成后立即调用，这一步实例已完成对选项的处理；

    意味着：数据侦听、计算属性、方法、事件/侦听器的回调函数，已被配置完毕，但，挂载阶段还没开始；

    此阶段，可以访问到数据了：但是页面中真实DOM还没有渲染出来；

    钩子函数：可以进行相关初始化事件的绑定、发送请求操作；

挂载阶段： 渲染模板)

  • beforeMount： 在挂载开始之前被调用：相关的 render 函数首次被调用；

    DOM即将渲染出来，与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作

  • mounted： 实例被挂载后调用，el 被新创建的 vm.$e 替换，如果根实例挂载到了一个元素上，vm.$el也在元素内；

    数据挂载完毕，真实dom元素已经渲染完成了,钩子函数内部可以做一些实例化相关的操作

更新阶段： 修改数据 → 更新视图)

  • beforeUpdate： 在数据发生改变后，DOM被更新之前被调用，适合在现有 DOM 将要被更新之前访问它；

    钩子函数不会立即执行： 当组件挂载完毕的时候，数据发生改变的时候，立马执行；

    钩子函数获取DOM的内容是更新之前的内容： .innerHTML

  • updated： 在数据发生改变后、虚拟DOM重新渲染、更新完毕之后被调用，适合执行依赖于 DOM 的操作；

    数据发现改变之后生成新的虚拟DOM，与之前的虚拟DOM进行比对，差异之后，就会进行真实DOM渲染；

    updated钩子函数内，可以获取：diff算法更新之后的DOM内容；

销毁阶段： 注销Vue实例，清理资源占用

  • beforeDestory： 实例销毁之前调用，在这一步，实例仍然可用；

    组件销毁的时候触发：钩子函数，可以做一些善后操作、清除一些初始化事件、定时器相关的东西；

  • destoryed： 实例销毁后调用：对应 Vue 实例的所有指令都被解绑、事件监听器被移除、所有的子实例也都被销毁

  • 注意： 卸载之后页面还存在，因为卸载并不会清理DOM，但此时VUE实例已经无法操作了；

  • 销毁操作： 有很多种通常是：关闭浏览器、调用: Vue实例.$destroy();

在这里插入图片描述

生命周期钩子Demo

<body>
  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
        <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      //创建阶段: 准备数据)
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count);
        //this.数据名 获取请求回来的数据,函数内可以开始发送始化渲染的请求了;
      },

      //挂载阶段: 渲染模板)
      beforeMount () { 
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML) },
      mounted () { console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML) },

      //更新阶段: 修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了',this.count,',视图还没更新', document.querySelector('span').innerHTML) },
      updated () { console.log('updated 数据修改了',this.count,',视图已经更新', document.querySelector('span').innerHTML) },

      //卸载阶段: 注销Vue实例,清理资源占用
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用,定时器,延时器...')
      },
      destroyed () {
        console.log('destroyed卸载后: Vue实例失去活性,完全丧失功能,但并不会清理DOM')
      }
    })
  </script>
</body>

生命周期钩子函数案例：

介绍最常用的钩子函数： created、mounted 处于创建和挂载阶段、一般来说页面加载过程中执行、定义的操作；

updated： 属于使用过程中执行的钩子函数，update更多会被计算属性、watcher 取而代之；

distroyed： Vue实例销毁后调用，通常用于对资源的回收操作；

created应用：

Vue实例创建完成后调用，适合在此阶段进行数据初始化和网络请求，

注意事项：data、methods 数据已经可用，但 DOM 还未生成，不能进行 DOM 操作；

Demo案例： 在created 中将 message 的值从 'Hello, Vue!' 修改为 'Hello, World!，定义一个初始化请求数据；

//因为内部涉及到异步操作,所以为了稳定执行顺序需要 async\await
async created () {
    console.log('created: 组件实例已创建');
    //发送请求获取数据,更新到 list 中，用于页面渲染 v-for
    const res = await axios.get('http://127.0.0.1:3000/news/list');
    this.list = res.data.data.newsList;
    //在 created 钩子中进行数据初始化
    this.newsTitle = 'M新闻';
},

mounted应用：

Vue实例挂载到 DOM 上后调用，适合在此阶段进行依赖于 DOM 的操作，如获取 DOM 元素、发起异步请求等；

Demo案例： 在 mounted 钩子中使用 this.$nextTick 确保 DOM 已经完全渲染，然后将 <h1> 元素的颜色设置为蓝色

mounted() {
    console.log('mounted: 组件已挂载到 DOM');
    // 在 mounted 钩子中进行 DOM 操作
    this.$nextTick(() => {
        const h1Element = this.$el.querySelector('h1');
        h1Element.style.color = 'blue';
    });
}

小黑记账清单：

文档学习借鉴于黑马，但为了接口稳定，本人自己使用Express搭建了后端环境：

原黑马接口文档： https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058

<body>
  <div id="app">
    <div class="contain">
      <!-- 左侧列表 -->
      <div class="list-box">
        <!-- 添加资产 -->
        <form class="my-form">
          <input type="text" class="form-control" placeholder="消费名称" />
          <input type="text" class="form-control" placeholder="消费价格" />
          <button type="button" class="btn btn-primary">添加账单</button>
        </form>
        <table class="table table-hover">
          <thead>
            <tr>
              <th>编号</th>
              <th>消费名称</th>
              <th>消费价格</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>帽子</td>
              <td>99.00</td>
              <td><a href="javascript:;">删除</a></td>
            </tr>
            <tr>
              <td>2</td>
              <td>大衣</td>
              <td class="red">199.00</td>
              <td><a href="javascript:;">删除</a></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">消费总计： 298.00</td>
            </tr>
          </tfoot>
        </table>
      </div>
      
      <!-- 右侧图表 -->
      <div class="echarts-box" id="main"></div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    /**
     * 接口文档地址：学习借鉴于黑马,但为了接口稳定,本人自己使用Express搭建了后端环境;
     * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
     * 
     * 功能需求：
     * 1. 基本渲染
     * 2. 添加功能
     * 3. 删除功能
     * 4. 饼图渲染
     */
    const app = new Vue({
      el: '#app',
      data: {
        
      },
    })
  </script>
</body>

页面渲染：

页面渲染： 窗口打开立刻发送请求获取数据 created，拿到数据，存到data的响应式数据中，

结合数据，进行渲染 v-for，消费统计 —> 计算属性computed

请求接口： http://127.0.0.1:3000/goodsBill/goodsBillList

<!-- ....省略部分代码 -->
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list" :key="item.id" >
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><a href="javascript:;">删除</a></td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
    <script>
      /**
       * 接口文档地址：学习借鉴于黑马,但为了接口稳定,本人自己使用Express搭建了后端环境;
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058 */
      const app = new Vue({
        el: '#app',
        data: {
          list:[],
        },
        computed: {
          totalPrice () { return this.list.reduce((sum, item) => sum + item.price, 0) }
        },
        async created () {
          const res = await axios.get('http://127.0.0.1:3000/goodsBill/goodsBillList');
          this.list = res.data.data
        }
      })
    </script>
  </body>
</html>

新增商品账单：

新增商品账单： 收集表单数据v-model (Vue优点直接获取数据，使用指令修饰符处理数据，

Vue实例中定义新增函数methods:{ add(){ ... } }，并添加按钮注册点击事件：对输入的内容做非空判断，发送请求；

请求成功后，对文本框内容进行清空，并重新渲染列表数据，所以就需要重新请求goodsBillList，为了方便也可以定义函数；

优化：created中页面加载过程中的请求，调用：methods，created阶段：可以访问到数据、函数；

调用接口： http://127.0.0.1:3000/goodsBill/addgoodsBill、{ 'name':'汪汪雪饼','price':5 }

<!-- ....省略部分代码 -->
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">
          <!-- 添加资产 -->
          <form class="my-form">
            <input type="text" class="form-control" placeholder="消费名称" v-model.trim="name" />
            <input type="text" class="form-control" placeholder="消费价格" v-model.number="price" />
            <button type="button" class="btn btn-primary" @click="add" >添加账单</button>
          </form>
          <!-- ....省略部分代码 -->
        </div>
      </div>
    </div>
    <script>
      /**
       * 接口文档地址：学习借鉴于黑马,但为了接口稳定,本人自己使用Express搭建了后端环境;
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058 */
      const app = new Vue({
        el: '#app',
        data: {
          list:[],
          name: '',
          price: ''
        },
        computed: {
          totalPrice () { return this.list.reduce((sum, item) => sum + item.price, 0) }
        },
        async created () {
          // const res = await axios.get('http://127.0.0.1:3000/goodsBill/goodsBillList');
          // this.list = res.data.data
          
          // 优化：created阶段：可以访问到数据、函数, 但是页面中真实DOM还没有渲染出来;
          // 所以可以调用methods中的请求接口函数,实现页面渲染,优化代码结构;
          this.getList();                                                                 //渲染数据;
        },
        methods: {
          //页面渲染：
          async getList(){
            const res = await axios.get('http://127.0.0.1:3000/goodsBill/goodsBillList');
            this.list = res.data.data;
          },
          //新增商品账单：
          async add(){
            // 验证数据非空\发送添加请求\重新渲染数据;
            if (!this.name) { return alert('请输入消费名称'); }
            if (typeof this.price !== 'number') { return alert('请输入正确的消费价格') }
            const res = await axios.post('http://127.0.0.1:3000/goodsBill/addgoodsBill', {  //发送添加请求
              name: this.name,
              price: this.price
            })
            this.getList();                                                                 //重新渲染数据;
            //置空数据
            this.name = ''
            this.price = ''
          },
          //删除商品账单：
          async del (id) { }
        }
      })
    </script>
  </body>
</html>

删除商品账单：

删除商品账单： 注册点击事件，获取当前行的id，根据id发送删除请求，重新渲染列表

调用接口： DELTE http://127.0.0.1:3000/goodsBill/delgoodsBill/:id

商品账单饼图渲染：

前端领域图形渲染：一定离不开的三方依赖：Apache ECharts 内置了丰富的图形组件，轻松的进行数据展示；

引入Echarts依赖： https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js

创建一个容器用于展示组件、mounted函数中DOM已经渲染完成，在其中初始化图形；

在每次数据修改之后，更新图形中的数据，重新渲染图形；

<!-- ....省略部分代码 -->
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <!-- 右侧图表: 创建一个容器用于展示组件-->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      /**
       * 接口文档地址：学习借鉴于黑马,但为了接口稳定,本人自己使用Express搭建了后端环境;
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058 */
      const app = new Vue({
        el: '#app',
        data: {
          list:[],
          name: '',
          price: ''
        },
        mounted(){
          //`mounted`函数中DOM已经渲染完成，在其中初始化图形;
          this.myChart = echarts.init(document.querySelector('#main'));                   
          this.myChart.setOption({
            // 大标题
            title: {
              text: '消费账单列表',
              left: 'center'
            },
            // 提示框
            tooltip: {
              trigger: 'item'
            },
            // 图例
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            // 数据项
            series: [
              {
                name: '消费账单',
                type: 'pie',
                radius: '50%',
                data: [         
                  // { value: 1048, name: '球鞋' },
                  // { value: 735, name: '防晒霜' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        },
        methods: {
          //页面渲染：
          async getList(){
            const res = await axios.get('http://127.0.0.1:3000/goodsBill/goodsBillList');
            this.list = res.data.data;

            //在每次数据修改之后,更新图形中的数据,重新渲染图形;
            this.myChart.setOption({
              series: [
                {
                  data: this.list.map(item => ({ value: item.price, name: item.name}))
                }
              ]
            })  
          }
        }
      })
    </script>
  </body>
</html>


代码GZH回复： Vue生命周期

Java.慈祥
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
谁说后端程序员不懂前端(vue专场)
浮生怳忽如梦的博客
03-15 562
vue框架跟面试官吹牛的必备技能
vue生命周期理解
CS_lzx的博客
03-24 212
生命周期 每一个实例和组件都会经历一个完整的生命周期，分为三个阶段 1.初始化阶段 2.运行中(挂载数据) 3.销毁 生命周期的过程 1.一个组件和实例，通过new Vue()来创建，开始生命周期。 2.实例化之后，beforeCreate钩子函数会立马执行，此时还没有挂载数据，再这个函数里面获取不到数据，同时里面的真实DOM节点也没有挂在出来，为NULL。 3.在挂载数据(注：没有挂载dom节点...
Vue的生命周期
我是小哈哈
04-23 73
# Vue生命周期总结 【1.初始化阶段】 beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例【仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性】 console.log("beforeCreate: "+this.msg); }, created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经【初始化了data属性和metho.
vue生命周期以及watch 、computed 、methods 执行顺序
weixin_53663431的博客
03-01 2172
vue生命周期以及watch 、computed 、methods 执行顺序
浅析Vue 生命周期
08-27
Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue 实例时，会读取所有的...
vue生命周期实例小结
10-18
Vue实例在其生命周期中经历一系列的初始化、运行和销毁过程，每个阶段都有相应的钩子函数，允许开发者在特定时刻执行特定的操作。下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
浅谈vue生命周期共有几个阶段？分别是什么？
10-14
Vue.js的生命周期是指一个Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有特定的任务和可调用的钩子函数。Vue实例在生命周期中的不同阶段，执行不同的操作，例如数据绑定、DOM操作、事件处理等。了解...
Vue生命周期.xmind
01-29
Vue生命周期.xmind
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 254
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 742
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 211
el-table实现。
vue this.$refs 动态拼接
cimbala的博客
07-19 175
业务需要，refs是不固定的。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 632
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue 腾讯云 javascript sdk + 简单富文本组件设计+实战
呵呵哒!的博客
07-19 241
【代码】vue 腾讯云 javascript sdk + 简单富文本组件设计+实战。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 784
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
element UI ：el-table横向列内容超出宽度，滚动条不显示问题
qq_44776454的博客
07-18 578
element UI ：el-table横向列内容超出宽度，滚动条不显示问题
vue封装防重复点击事件，并全局挂载使用
m0_47791238的博客
07-22 95
在utils文件夹中(可以和普通工具类存放一起，也可以按自己需求存放)创建js文件 preventReClick.js。1、创建防重复点击的js文件，在js文件中添加防重复点击的方法。
尤雨溪懂个锤子vue出处
12-14
根据引用[1]，尤雨溪是Vue.js的创造者和主要开发者。Vue.js是一个流行的JavaScript框架，用于构建用户界面。它的目标是通过提供简单的API和高性能来使开发人员更容易地构建Web应用程序。Vue.js的灵感来自于Angular和React，但它的设计更加简单和易于使用。Vue.js已经成为了一个非常受欢迎的框架，被许多公司和开发人员广泛使用。 如果您想了解更多关于Vue.js的信息，可以参考引用中提到的Vue.js全家桶系列，包括vue-router、vuex、vue-resource和vue-cli等工具。这些工具可以帮助您更轻松地构建Vue.js应用程序，并提供了许多有用的功能和工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java.慈祥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值