vue3深入学习 nextTick和historyApiFallback
更新时间：2022年08月09日 08:28:26 作者：满山前端我头最秃
这篇文章主要介绍了vue3深入学习 nextTick和historyApiFallback，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue之常用的内置指令，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了Vue项目中input框focus时不调出键盘问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
这篇文章主要为大家详细介绍了vue实现简单loading进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
这篇文章主要为大家介绍了派发器抽离vue2单组件中的大量逻辑技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本篇文章主要介绍了浅谈Vue数据绑定的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue中的封装常用工具类，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
今天小编就为大家分享一篇解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue使用echarts散点图在区域内标点，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论