当前位置：首页 > article >正文

【Vue】- 生命周期和数据请求案例分析

article 2024/9/22 23:25:38

文章目录

知识回顾
前言
源码分析
- 1. 生命周期
- 2. 请求数据案例分析
拓展知识
总结

知识回顾

前言

Vue生命周期
● 就是一个Vue实例从创建到销毁的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
● 创建阶段：创建响应式数据
● 挂载阶段：渲染模板
● 更新阶段：修改数据，更新视图
● 销毁阶段：销毁Vue实例
使用步骤
● 先从vue中导入以on打头的生命周期钩子函数
● 在setup函数中调用生命周期函数并传入回调函数
● 生命周期钩子函数可以调用多次

源码分析

1. 生命周期

<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref
} from 'vue'

// vue 2.0写法
// import { onBeforeMount } from 'vue'
// export default {
//   beforeCreate() {
//     console.log('beforeCreate')
//   },
//   created() {
//     console.log('created')
//   },
//   onBeforeMount() {
//     console.log('onBeforeMount')
//   },
//   beforeMount() {
//     console.log('beforeMount')
//   },
//   mounted() {
//     console.log('mounted')
//   },
//   beforeUpdate() {
//     console.log('beforeUpdate')
//   },
//   updated() {
//     console.log('updated')
//   },
//   beforeUnmount() {
//     console.log('beforeUnmount')
//   },
//   unmounted() {
//     console.log('unmounted')
//   }
// }
const age = ref(18)

const timeId = setInterval(() => {
  age.value++
}, 1000)

onBeforeMount(() => {
  console.log('onBeforeMount')
})
onMounted(() => {
  console.log('onMounted')
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})
onUpdated(() => {
  console.log('onUpdated')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
  clearInterval(timeId)
})
onUnmounted(() => {
  console.log('onUnmounted')
})
</script>

<template>
  <div class="box">子组件</div>
  <div>{{ age }}</div>
</template>

<style>
.box {
  width: 300px;
  height: 300px;
  background-color: red;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import ChildComp from './components/ChildComp.vue'
const isShow = ref(true)
</script>

<template>
  <div>
    父组件
    <!-- 使用子组件 -->
    <ChildComp v-if="isShow" />
    <Button @click="isShow = !isShow">移除子组件</Button>
  </div>
</template>

<style lang="css" scoped></style>

2. 请求数据案例分析

<script setup lang="ts">
import axios from 'axios'
import { ref, computed, onMounted } from 'vue'

// 接口地址：http://
// 请求方式：get

interface News {
  id: number
  title: string
  source: string
  cmtcount: number
  img: string
  time: string
}

const newsList = ref<News[]>([])
const getNewsList = async () => {
  const res = await axios.get('http://*******')
  newsList.value = res.data.data as News[]
}
onMounted(() => {
  getNewsList()
})
</script>

<template>
  <div id="app">
    <ul>
      <li v-for="item in newsList" :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">
          <!-- v-bind绑定 简写 -->
          <img :src="item.img" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news {
  display: flex;
  height: 120px;
  width: 600px;
  margin: 0 auto;
  padding: 20px 0;
  cursor: pointer;
}

.news .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}

.news .left .title {
  font-size: 20px;
}

.news .left .info {
  color: #999999;
}

.news .left .info span {
  margin-right: 20px;
}

.news .right {
  width: 160px;
  height: 120px;
}

.news .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>