vue3深入學習 nextTick和historyApiFallback

2022-08-09 10:00:39

1、nextTick

官方解釋：將回撥推遲到下一個 DOM 更新週期之後執行。在更改了一些資料以等待 DOM 更新後立即使用它。

比如我們有下面的需求：

點選一個按鈕，我們會修改在h2中顯示的message；
message被修改後，獲取h2的高度；

<template>
  <div>
    <h3 class="title" ref="title">{{ message }}</h3>
    <button @click="handleClick">新增內容</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>

可以看到，上面每次列印的都是上一次元素內容的高度

實現上面的案例我們有三種方式：

方式一：在點選按鈕後立即獲取到h2的高度（錯誤的做法）
方式二：在updated生命週期函數中獲取h2的高度（但是其他資料更新，也會執行該操作）

<template>
  <div>
    <h3 class="title" ref="title">{{ message }}</h3>
    <button @click="handleClick">新增內容</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函數；

nextTick是如何做到的呢？

<template>
  <div>
    <h3 class="title" ref="title">{{ message }}</h3>
    <button @click="handleClick">新增內容</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是開發中一個非常常見的屬性，它主要的作用是解決SPA頁面在路由跳轉之後，進行頁面重新整理時，返回404的錯誤。

2.boolean值：預設是false

如果設定為true，那麼在重新整理時，返回404錯誤時，會自動返回 index.html 的內容；

3.object型別的值，可以設定rewrites屬性：

可以設定from來匹配路徑，決定要跳轉到哪一個頁面；

4.事實上devServer中實現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
  }
}))

現在已經是vite打包工具了，上面是webpack的設定

自己設定可以在專案根目錄下建立一個vue.config.js檔案，在這個檔案中進行設定：

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

到此這篇關於vue3深入學習 nextTick和historyApiFallback的文章就介紹到這了,更多相關vue3 nextTick和historyApiFallback內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

vue3深入學習 nextTick和historyApiFallback

目錄

1、nextTick

2、historyApiFallback

熱門文章