vue3深入學習?nextTick和historyApiFallback
1、nextTick
官方解釋：將回調(diào)推遲到下一個 DOM 更新周期之后執(zhí)行。在更改了一些數(shù)據(jù)以等待 DOM 更新后立即使用它。
比如我們有下面的需求：
- 點擊一個按鈕，我們會修改在h2中顯示的message；
- message被修改后，獲取h2的高度；
<template>
<div>
<h3 class="title" ref="title">{{ message }}</h3>
<button @click="handleClick">添加內(nèi)容</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('')
const title = ref(null)
const handleClick = () => {
message.value += 'NextTick!'
console.log(title.value.offsetHeight)
}
</script>
<style scoped>
.title {
width: 100px;
word-break: break-all;
}
</style>
可以看到，上面每次打印的都是上一次元素內(nèi)容的高度
實現(xiàn)上面的案例我們有三種方式：
- 方式一：在點擊按鈕后立即獲取到h2的高度（錯誤的做法）
- 方式二：在updated生命周期函數(shù)中獲取h2的高度（但是其他數(shù)據(jù)更新，也會執(zhí)行該操作）
<template>
<div>
<h3 class="title" ref="title">{{ message }}</h3>
<button @click="handleClick">添加內(nèi)容</button>
</div>
</template>
<script setup>
import { ref, onUpdated } from 'vue'
const message = ref('')
const title = ref(null)
const handleClick = () => {
message.value += 'NextTick!'
}
onUpdated(() => {
console.log(title.value.offsetHeight)
})
</script>
<style scoped>
.title {
width: 100px;
word-break: break-all;
}
</style>
方式三： 使用nextTick函數(shù)；
nextTick是如何做到的呢？
<template>
<div>
<h3 class="title" ref="title">{{ message }}</h3>
<button @click="handleClick">添加內(nèi)容</button>
</div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const message = ref('')
const title = ref(null)
const handleClick = () => {
message.value += 'NextTick!'
// 更新 DOM
nextTick(() => {
console.log(title.value.offsetHeight)
})
}
</script>
<style scoped>
.title {
width: 100px;
word-break: break-all;
}
</style>
2、historyApiFallback
1.historyApiFallback是開發(fā)中一個非常常見的屬性，它主要的作用是解決SPA頁面在路由跳轉(zhuǎn)之后，進行頁面刷新時，返回404的錯誤。
2.boolean值：默認是false
- 如果設置為true，那么在刷新時，返回404錯誤時，會自動返回 index.html 的內(nèi)容；
3.object類型的值，可以配置rewrites屬性：
- 可以配置from來匹配路徑，決定要跳轉(zhuǎn)到哪一個頁面；
4.事實上devServer中實現(xiàn)historyApiFallback功能是通過connect-history-api-fallback庫的：
可以查看文檔
代碼在vue-cli腳手架項目的node_modules/@vue/cli-service/lib/commands/serve.js中：
const server = new WebpackDevServer(compiler, Object.assign({
historyApiFallback: {
disableDotRule: true
}
}))現(xiàn)在已經(jīng)是vite打包工具了，上面是webpack的配置
自己配置可以在項目根目錄下創(chuàng)建一個vue.config.js文件，在這個文件中進行配置：
module.exports = {
configureWebpack: {
devServer: {
historyApiFallback: true
}
}
}到此這篇關于vue3深入學習 nextTick和historyApiFallback的文章就介紹到這了,更多相關vue3 nextTick和historyApiFallback內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Vue之常用的內(nèi)置指令，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
Vue項目中input框focus時不調(diào)出鍵盤問題的解決
這篇文章主要介紹了Vue項目中input框focus時不調(diào)出鍵盤問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
何時/使用 Vue3 render 函數(shù)的教程詳解
這篇文章主要介紹了何時/使用 Vue3 render 函數(shù)的教程詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單loading進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要為大家介紹了派發(fā)器抽離vue2單組件中的大量邏輯技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本篇文章主要介紹了淺談Vue數(shù)據(jù)綁定的原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
學習過vue2的寶子們肯定知道,組件傳值是vue項目開發(fā)過程中必不可少的功能場景,下面這篇文章主要給大家介紹了關于vue3中組件傳值的多種方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
解決IE11 vue +webpack 項目中數(shù)據(jù)更新后頁面沒有刷新的問題
今天小編就為大家分享一篇解決IE11 vue +webpack 項目中數(shù)據(jù)更新后頁面沒有刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue使用echarts散點圖在區(qū)域內(nèi)標點
這篇文章主要為大家詳細介紹了Vue使用echarts散點圖在區(qū)域內(nèi)標點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03