VUE2第二期生命周期及工程化

JAY.LIN 收录于 Vue

2025-03-07 约 2138 字预计阅读 5 分钟

https://bing.ee123.net/img/rand?artid=146100674

【VUE2】第二期——生命周期及工程化

1 生命周期

1.1 介绍

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

1.2 钩子

Vue生命周期过程中，会 自动运行一些函数 ，被称为【 生命周期钩子 】→ 让开发者可以在【 特定阶段 】运行 自己的代码

示例：

<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

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

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>
</body>

2 可视化图表库

官网：

饼图渲染:
(1) 在创建阶段后（created）初始化一个饼图 echarts.init(dom)
(2) 将更新饼图数据代码（echarts.setOption({ … })）封装，每当更新列表时调用一次，根据数据实时更新饼图
(3) 在挂载阶段后（mouted）调用函数，更新一次饼图数据

<body>
  <div id="app">
    <div class="echarts-box" id="main"></div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [],
        name: '',
        price: ''
      },
      created () {
        // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
        //   params: {
        //     creator: '小黑'
        //   }
        // })
        // this.list = res.data.data

        this.getList()
      },
      mounted () {
        //初始化
        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('https://applet-base-api-t.itheima.net/bill', {
            params: {
              creator: '小黑'
            }
          })
          this.list = res.data.data

          // 更新图表（后续渲染）
          this.myChart.setOption({
            // 数据项
            series: [
              {
                data: this.list.map(item => ({ value: item.price, name: item.name}))
              }
            ]
          })
        },

      }
    })
  </script>
</body>

⭐️注意（与以前不同的点）：

1.axios可以简写写成axios.请求方式(“请求地址”, 请求数据对象)

get请求方法需要在请求数据对象里面再挂载一个params对象，然后在里面写参数，而post直接在请求数据对象里面写参数就行了

2.typeof后可以不加小括号（typeof 是一个一元运算符，用于返回一个表示数据类型的字符串）但是还是推荐加括号，这样可读性高

3 脚手架Vue CLI

Vue CLI 是Vue官方提供的一个 全局命令工具

可以帮助我们 快速创建 一个开发Vue项目的 标准化基础架子 。【集成了webpack配置】

3.1 使用步骤

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本： vue –version
创建项目架子： vue create project-name (项目名不能使用中文)
启动项目： yarn serve 或者 npm run serve (命令不固定，找package.json)

记录：使用npm源或淘宝镜像且用yarn命令报错

解决：切换腾讯镜像，并且使用npm命令下载

3.2 项目目录介绍

虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可

main.js 入口文件
App.vue App根组件
index.html 模板文件

3.3 main.js入口文件代码介绍

//导入Vue模块
import Vue from 'vue'
//导入App根组件
import App from './App.vue'

//设置控制台是否打印当前环境：生产环境or开发环境
Vue.config.productionTip = false

//vue自动创建的实例化代码（简写）
new Vue({
  render: h => h(App),
}).$mount('#app')


//完整写法
new Vue({
  //el指定Vue所管理的容器，与上述.$mount('#app')效果一样
  el:"#app",
  //render基于App.vue创建结构渲染index.html
  render: (createElement) => {
    return createElement(App)
  }
})

4 组件化开发

4.1 组件

语法高亮插件：

构成：

template：结构（有且只能一个根元素）
script: js逻辑
style：样式 (可支持less，需要装包)

让组件支持less：

（1） style标签，lang=“less” 开启less功能
（2）装包: yarn add less less-loader -D 或者npm i less less-loader -D

4.2 普通组件注册

4.2.1 局部注册

特点：只能在注册的组件内使用

步骤：

创建.vue文件（三个组成部分），可输入vue快速创建

组件名规范：大驼峰命名法，如 HmHeader

在使用的组件内先导入再注册，最后使用

注册语法：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'

export default {  // 局部注册
  components: {
   '组件名': 组件对象,
  }
}

例：

// 导入需要注册的组件
import HmHeader from './components/HmHeader'

export default {  // 局部注册
  components: {
    HmHeader:HmHeaer,
    //或
    //HmHeader
  }
}

使用方式：

当成html标签使用即可 <组件名></组件名>

4.2.2 全局注册

特点：全局注册的组件，在项目的 任何组件 中都能使用

步骤：

创建.vue组件（三个组成部分）

与上述一样，此处不再赘述

在 main.js 中进行全局注册

Vue.component('组件名', 组件对象)

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)