脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 nextTick和historyApiFallback

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 搭建Vuex环境详解

    Vue 搭建Vuex环境详解

    这篇文章主要为大家介绍了Vue搭建Vuex环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue自定义指令v-focus实例详解

    Vue自定义指令v-focus实例详解

    这篇文章主要为大家介绍了Vue自定义指令v-focus实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • VueJS实现用户管理系统

    VueJS实现用户管理系统

    这篇文章主要为大家详细介绍了VueJS实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • vuecli4插件svg-sprite-loader使用svg图标

    vuecli4插件svg-sprite-loader使用svg图标

    这篇文章主要为大家介绍了vuecli4插件svg-sprite-loader使用svg图标示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 浅谈Vue单页面做SEO的四种方案

    浅谈Vue单页面做SEO的四种方案

    Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案，通过查找资料，大概有以下4种方法，本文就详细的介绍一下
    2021-10-10
  • vue多层嵌套路由实例分析

    vue多层嵌套路由实例分析

    这篇文章主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • Vue热更新出现内存溢出的解决方法

    Vue热更新出现内存溢出的解决方法

    开发项目有一段时间了,随着项目越来越大,打包的时间也相应的变长了,打包时的内存也增多了,这时候产生了一个问题,在发布项目的时候,会出现Vue热更新出现内存溢出的问题,所以本文给大家介绍了Vue热更新出现内存溢出的解决方法,需要的朋友可以参考下
    2024-05-05
  • vue中设置echarts宽度自适应的代码步骤

    vue中设置echarts宽度自适应的代码步骤

    这篇文章主要介绍了vue中设置echarts宽度自适应的问题及解决方案,常常需要做到echarts图表的自适应，一般是根据页面的宽度做对应的适应，本文记录一下设置echarts图表的自适应的步骤，需要的朋友可以参考下
    2022-09-09
  • 使用Vue 自定义文件选择器组件的实例代码

    使用Vue 自定义文件选择器组件的实例代码

    这篇文章主要介绍了使用Vue 自定义文件选择器组件的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vuex通过getters访问数据为undefined问题及解决

    vuex通过getters访问数据为undefined问题及解决

    这篇文章主要介绍了vuex通过getters访问数据为undefined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08

最新评论