Vue_3：声明周期钩子(组件化开发)

Vue_03_note

---

01-生命周期 和 生命周期的四个阶段

---

什么是生命周期？

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

---

生命周期的四个阶段

1. 创建阶段：数据响应式处理…
2. 挂载阶段：渲染模板
3. 更新阶段：修改数据，更新视图（可以重复循环）
4. 销毁阶段：销毁实例

---

有了声明周期，才知道什么操作代码该在什么地方写。

问题？

1. 什么时候可以发送初始话请求？ 在创建阶段结束后才可以
2. 什么时候可以操作dom呢？ 需要在挂载阶段结束后才行

---

02-Vue 声明周期函数（钩子函数）

---

什么是钩子函数

Vue生命周期过程中，会自动运行一些函数，被成为（生命周期钩子）–> 让开发者可以在 （特定阶段） 运行自己的代码。

---

八大钩子（四对）

1. beforeCreate => created
2. beforeMount => mounted
3. beforeUpdate => updated
4. beforeDestroy => destroyed

---

1. 发送请求初始化渲染请求需要在created函数阶段发送请求，不然数据都没创建怎么发送请求呢？
2. 操作dom需要再mounted函数阶段操作。

---

代码示例：八个钩子函数

<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('beforeCretae 响应式数据准备好之前')
   },
   created () {
     console.log('created 响应式数据准备好之后',this.count)
     // this.数据名 = 请求回来的数据
     // 在created中，可以开始初始化发送请求了

   },
   // 2、挂载阶段（渲染模板）
   beforeMount () {
     console.log('beforeMount 模板渲染之前',document.querySelector('h3').innerHTML)
   },
   mounted () {
     console.log('mounted 模板渲染之后',document.querySelector('h3').innerHTML)
     // 在mounted阶段可以操作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>

---

03-生命周期的两个例子

---

第一个例子

需求：使用created钩子函数向服务器发送请求新闻。

---

代码示例

<div id="app">
 <ul>
   <li v-for="(item,index) in list" :key="item.id" class="news">
     <div class="left">
       <div class="title">{{ item.title }}div>
       <div class="info">
         <span>{{ item.source}}span>
         <span>{{item.time }}span>
       div>
     div>
     <div class="right">
       <img :src="item.img" alt="">
     div>
   li>
 ul>
div>

====================================================
<script>
 // 接口地址：http://hmajax.itheima.net/api/news
 // 请求方式：get
 const app = new Vue({
   el: '#app',
   data: {
     list: []
   },
   // created钩子函数
   async created () {
     // 1、发送请求，获取数据
     const res = await axios.get('http://hmajax.itheima.net/api/news')
     console.log(res)
     // 将数据更新给 data 中的 list
     this.list = res.data.data
   }
 })
script>

---

第二个例子

需求：使用 mounted 模板渲染完，可以开始操作DOM了。一进页面就让输入框得到焦点。

---

代码示例

<div class="container" id="app">
<div class="search-container">
 <img src="https://www.itheima.com/images/logo.png" alt="">
 <div class="search-box">
   <input type="text" v-model="words" id="inp">
   <button>搜索一下button>
 div>
div>
div>
=====================================================
<script>
const app = new Vue({
 el: '#app',
 data: {
   words: ''
 },
 // 核心思路：
 // 1、等输入框渲染出来
 // 2、让输入框获取焦点 .focus()方法
 mounted () {
   document.querySelector('#inp').focus()
 }
})
script>

总结就是：什么时候做什么事，不能乱。

---

小黑记账清单

---

功能需求：

1. 基本渲染

   ​ * (1) 立刻发送请求获取数据 created

   ​ * (2) 拿到数据，存到data的响应式数据中

   ​ * (3) 结合数据，进行渲染 v-for

   ​ * (4) 消费统计 => 计算属性

2. 添加功能

   ​ * (1) 收集表单数据 v-model

   ​ * (2) 给添加按钮注册点击事件，发送添加请求

   ​ * (3) 需要重新渲染

3. 删除功能

   ​ * (1) 注册点击事件，传参传 id

   ​ * (2) 根据 id 发送删除请求

   ​ * (3) 需要重新渲染

4. 饼图渲染

   ​ * (1) 初始化一个饼图 echarts.init(dom) mounted钩子实现

   ​ * (2) 根据数据实时更新饼图 echarts.setOption({ … })

---

---

项目代码

容器视图

  <div id="app">
    <div class="contain">
      
      <div class="list-box">

        
        <form class="my-form">
          <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
          <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
          <button @click="add" 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 v-for="(item,index) in list" :key="item.id">
              <td>{{ index + 1 }}td>
              <td>{{ item.name }}td>
              <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}td>
              <td><a @click="del(item.id)" href="javascript:;">删除a>td>
            tr>
          tbody>
          <tfoot>
            <tr>
              <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}td>
            tr>
          tfoot>
        table>
      div>

      
      <div class="echarts-box" id="main">div>
    div>
  div>

Vue实例代码

    const app = new Vue({
      el: '#app',
      data: {
        list: [],
        name: '',
        price: ''
      },

      // 计算属性
      computed: {
        totalPrice() {
          return this.list.reduce((sum, item) => sum + item.price, 0)
        }
      },
      // 1、渲染
      created() {
        this.getList()
      },
      //自己封装的方法。
      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 }))
              }
            ]

          })
        },
        // 2、添加
        async add() {
          // 请求前的一些判断
          if (!this.name) {
            alert('请输入消费名称')
            return
          }
          if (typeof this.price !== 'number') {
            alert('请输入正确的消费价格')
            return
          }
          // 发送添加请求
          const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
            creator: '刘不住',
            name: this.name,
            price: this.price
          })
          // 添加完成后，重新渲染一次
          this.getList()
          // 重置输入框
          this.name = ''
          this.price = ''
        },
        // 3、删除
        del(id) {
          // 发起删除请求
          axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
          // 调用渲染API
          this.getList()
          alert('删除成功')
        }
      },
      mounted() {
        // 将myChart挂载在实例上，就相当于实例中所有所用于都可以访问使用
        this.myChart = echarts.init(document.querySelector('#main'))
        // 配置项数据
        option = {
          // 标题
          title: {
            text: '消费账单列表',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: '消费账单',
            left: 'left'
          },
          // 数据项
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                // { value: 1048, name: 'Search Engine' },
                // { value: 735, name: 'Direct' },
                // { value: 580, name: 'Email' },
                // { value: 484, name: 'Union Ads' },
                // { value: 300, name: 'Video Ads' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.myChart.setOption(option)
      }
    })
  </script>

---

05-工程化开发和脚手架

---

**Vue CLI 是**Vue官网提供的一个**全局命令工具。**

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

---

好处：

1. 开箱即用，零配置
2. 内置babel等工具
3. 标准化

---

使用步骤

1. 全局安装（1次）： yarn global add @vue/cli 或者 npm i @vue/cli -g
2. 查看Vue版本： vue --version
3. 创建项目架子： vue create project -name(项目名-不能使用中文)
4. 启动项目： yarn serve 或 npm run server (找package.json)

---

这里使用了yarn 创建项目成功

注意：根据不同的环境会出现不同的问题，需要查阅解决，目前2023年8月18日16:28:30创建项目成功了。（问题解决），后面出现新的问题需要重新根据问题的相关性去解决即可

---

第3、4可以重复创建和执行，前面的一次就好。可以陪你到天荒地老。

---

关于main和App以及index文件的作用

• main.js文件核心作用：导入App.vue，基于App.vue创建结构，渲染index.html

三大文件的相互作用

执行yarn serve 命令后，立马将main.js文件执行了，然后使用根组件App.vue来渲染index.html文件结构

---

06-组件化开发 & 根组件-

---

组件的分类：

1. 普通组件
2. 根组件：整个应用最上层的组件，包裹所有普通小组件

谁是根组件呢？

• 答：App.vue

---

组件化

1. 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

• 好处：便于维护，利于复用——>提升开发效率。

---

App.vue文件(组件)

---

三个组成部分： 结构、样式、行为。

1. template：结构（有且仅有一个根元素）
2. script： js逻辑
3. style： 样式（可支持less，需要装包）

• 让组件支持less
  1. styl标签，lang=“less” 开启less功能
  2. 装包：yarn add less less-loader

---

07-普通组件的注册使用

---

局部注册

• 局部注册：只能在注册的组件内使用

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

  2. 在使用的组件内导入并注册

     导入组件：import 组件名 from '.vue文件路径'

---

使用

1. 当成 html 标签使用就可以了 <组件名>

注意：组件名规范 -> 大驼峰命名法，如HmHeader

---

App.vue代码

---

全局注册

---

• 全局注册：所有组件内都能使用

1. 创建.vue文件
2. main.js中进行全局注册

---

在main.js中操作：

语法：import 猪价你对象 from '组件路径'

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

// 编写导入的代码，往代码的顶部编写（规范）
import HmButton from './components/HmButton'

// 进行全局注册
Vue.component('HmButton',HmButton)

使用

1. 当成 html 标签使用就可以了 <组件名>

注意：组件名规范 -> 大驼峰命名法，如HmButton

---

技巧：一般都使用局部注册，如果发现确实是通用组件，在抽离到全局。

---

08-组件化开发网页的思路

---

页面开发思路

1. 分析页面，按模块拆分组件，搭架子（局部或全局注册）

2. 根据设计图，编写组件html结构css样式

3. 拆分封装通用组件（局部或全局注册）

   将来→通过js动态渲染，实现功能

---

由于项目主要的是实操和思路，这里主要展示一下主要的步骤

第一步：拆分组件

1. 我将这个网页分成了七个组件

---

第二步：注册局部组件

---

第三步：组件代码实现

就是将每个组件区域的代码和样式编写在各个组件的结构、样式、行为中，这里就不写出来了，太多了哈啊1

第四步：抽出全局组件

这是根据需求来的,使用Base开头（规范）

全局组件里面的代码就和我们局部组件的代码操作是一样的，只不过我们是将局部里面的代码在抽出来封装成全局组件而已（最好是实操看代码）

下面这里是在main.js中对全局组件的导入和注册

// 导入全局组件
import BaseGoodItem from './components/BaseGoodItem'
import BaseTopicItem from './components/BaseTopicItem'
// 注册全局组件
Vue.component('BaseGoodItem',BaseGoodItem)
Vue.component('BaseTopicItem',BaseTopicItem)

---