<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)容的高度

實(shí)現(xiàn)上面的案例我們有三種方式：

方式一：在點(diǎn)擊按鈕后立即獲取到h2的高度（錯(cuò)誤的做法）
方式二：在updated生命周期函數(shù)中獲取h2的高度（但是其他數(shù)據(jù)更新，也會(huì)執(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ā)中一個(gè)非常常見的屬性，它主要的作用是解決SPA頁面在路由跳轉(zhuǎn)之后，進(jìn)行頁面刷新時(shí)，返回404的錯(cuò)誤。

2.boolean值：默認(rèn)是false

如果設(shè)置為true，那么在刷新時(shí)，返回404錯(cuò)誤時(shí)，會(huì)自動(dòng)返回 index.html 的內(nèi)容；

3.object類型的值，可以配置rewrites屬性：

可以配置from來匹配路徑，決定要跳轉(zhuǎn)到哪一個(gè)頁面；

4.事實(shí)上devServer中實(shí)現(xiàn)historyApiFallback功能是通過connect-history-api-fallback庫的：

可以查看文檔

代碼在vue-cli腳手架項(xiàng)目的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的配置

自己配置可以在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.config.js文件，在這個(gè)文件中進(jìn)行配置：

module.exports = {
  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  }
}

到此這篇關(guān)于vue3深入學(xué)習(xí) nextTick和historyApiFallback的文章就介紹到這了,更多相關(guān)vue3 nextTick和historyApiFallback內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: