知识回顾
前言
-
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://
// 请求方式:getinterface News {id: numbertitle: stringsource: stringcmtcount: numberimg: stringtime: 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>
拓展知识
总结
生命周期
- 创建阶段
- 挂载阶段
- 更新阶段
- 销毁阶段
生命周期vue2.0 和 vue3.0的区别
- 深度监听的区别
- setup 中生命周期名称不同