vue 页面重新渲染的最佳方式

最新推荐文章于 2024-03-05 10:32:32 发布
最新推荐文章于 2024-03-05 10:32:32 发布
阅读量4.1k 收藏 6
点赞数 5
分类专栏： vue 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjy_191/article/details/119242331
版权

vue 页面重新渲染的最佳方式

问题点
当我们vue里面 路由是带参数的形式的时候，假如我们从当前页面跳转到下一个页面，也还是这个路由时，组件不会重新加载
在这里插入图片描述
在这里插入图片描述

假如要是组件不重新渲染的话，那么我们 data 中的数据还会是一样的，就很尴尬

最佳解决办法也是大家平时用得比较多的， :key

人狠话不多，先上代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

PS：我们只需要保证 key 每次都不会重复即可

上面的例子其实就和使用 v-for 时建议绑定 key 的原理一样

只要 key 的值变化就会重新加载组件

漂亮

yjy_191
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
✝️ 强制 Vue 重新渲染组件的正确方法
jexxx的博客
01-31 3624
有时 Vue 的 reactivity 不符合需求，你需要重新渲染一个组件，或者可能只是想remove当前的 DOM 并 re-render。那么如何让 Vue 以:key这称为，这是一个非常简单的解决方案，让我们看看还有其他的解决方案吧。
Vue强制组件重新渲染的方法讨论
11-21
有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？ 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。 这是一个非常简单的解决方案。 当然，你可能会对其他方式会更感兴趣： 简单粗暴的方式：重新加载整个页面 不妥的方式：使用 v-if 较好的方法：使用Vue的内置forceUpdate方法 最好的方法：在组件上进行 key 更改 简单粗暴的方式：重新加载整个页面 这相当于每次
Vue重新渲染页面
ScoloveCode的博客
01-19 1万+
vue重新渲染组件 第一种 使用vue内置的forceUpdate方法 this.$forceUpdate() //这不会更新您拥有的任何计算属性,调用forceUpdate只会强制重新渲染视图 第二种 在元素上绑定一个key,当key修改时,该DOM元素就会重新渲染 <template> <div :key="once"></div> </template> export default{ data(){ return{ once:0,
Vue2/3如何强制重新渲染整个页面
最新发布
Fisher的专栏
03-05 1432
VoerkaI18n是一个非常优秀的前端多语言解决方案库，提供初始化、提取文本、自动翻译、编译、自动补丁等工具链支持。本文介绍了在开发@voerkai18n/vue时如何制刷新页面的经验和技巧
VUE组件重新渲染（组件重载）的3种方式
weixin_60538045的博客
09-08 8009
这个最简单实用，如果需要每次在当前父页面更新时重载CompTable这个子组件就可以用这个方法，每次父组件更新 :key 都会重新取值，而时间戳每次都是不同的，组件发现 :key发生变化就会重新渲染。起初我还担心如果把 new Date().getTime() 直接放到。v-if可以实现 true (加载)和false(卸载)注意它仅仅影响实例本身和插入插槽内容的子组件，VUE 组件重新渲染（组件重载）的3种方式。会不会不生效，要不要传个变量给key，后来发现完全不用，直接放上去就可以。
vue组件中重新渲染的3种方式
Andrew_Chenwq的博客
08-26 1万+
因为vue是通过虚拟Dom算法来判断元素的变化，是否变化的核心是通过判断新旧元素的key值是否变化。如果你的key是变化的，则重新渲染该元素，如果key没变，则不会重新渲染。的时候，当前条件块里包含的元素会被销毁，如果包含的是组件，则组件对应的生命周期函数（的时候，当前条件块里的元素会被重建，如果包含的是组件，则组件对应的生命周期函数（属性，然后在需要重新渲染的时候，改变key的值就行。等），计算属性，watch等会执行，相当于重新渲染。所以如果你想让你的组件重新渲染，你给组件加上。...
vue2.0数据更新，重新渲染视图的三种方法
热门推荐
a646070718的博客
04-30 3万+
问题：利用v-for渲染数据，通过方法改变了数据，视图没有更新。原因：由于javascript的限制，Vue不能检测到以下变动的数组（如：objArr）：1.通过索引直接设置数组的某个值，this.objArr[index] = newValue;2.通过索引直接设置数组中对象的某个属性，this.objArr[index].pro = newValue;3.通过修改数组的长度，this.objA...
Vue(二)使用Element-ui组件库渲染后台系统登录页面
王红珠的博客
04-23 3170
我们想要实现的最终效果为: 一、项目初始化 执行指令 vue init webpack vue-shop-pro 把项目的结构文件创建出来 二、项目初始配置 在package.json中给webpack做指令配置 "scripts": { "line": "webpack-dev-server --inline --progress --config build/webpack.de...
手把手教您使用Nuxt3框架+Nuxt3中文开发教程+基于Vue3的混合渲染框架Nuxt3,教程35个功能配套示例源代码完整包
11-25
页面过渡动画,自主开发插件,使用AntD插件,使用Bootstrap插件：浏览器引用方式,使用Bootstrap插件：安装融合方式,内容管理（content）,public目录（静态资源）,assets目录（静态资源）,API接口：服务端处理（server）...
vueDataV:基于Vue + Echarts构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件
03-19
项目中部分前端库采用外部CDN日期，可以减少打包文件的体积，加快页面渲染。可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高是最佳效果。目前制作数据可视化大屏...
关于vue中v-for绑定数据重新渲染的问题
本郡主是喵
08-18 853
set 是 Vue 提供的一个全局方法，用于向响应式对象中添加或更新属性，并触发视图更新。它接受三个参数：对象、要添加/更新的属性名或索引，以及新的值。(他虽然这样说,但是我直接修改数组和对象元素，是能够重新渲染的，但是v-for渲染数据不可以。我修改被v-for绑定的数据，发现居然不能重新渲染。
「网页开发｜前端开发｜Vue」09 Vue状态管理Vuex：让页面根据用户登录状态渲染不同内容
过美好生活，做高效程序员
09-26 697
本文主要介绍如何通过Vue的状态管理框架Vuex来管理一些被不同组件或不同页面共同使用的数据，然后展示如何通过状态管理用户信息，并且在具体页面获取用户信息，并且根据用户信息的不同展示不同的页面内容。
Vue中data数据变化 -- 页面重新渲染的问题
m0_58355198的博客
08-21 7670
话不多说，直接上代码！！！ 1. 当数据属于基本类型时 ， vue会自动检测并在页面重新渲染 <div id="app"> <p>{{ testData }} </p> </div> <script src="./vue-2.6.12.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return {
Vue2刷新当前页面，并重新加载数据
大香蕉的博客
08-17 4576
实现原理： 1、移除目标页面（当前页面） 2、重新渲染目标页面 代码实现： 在vue2中，我们需要用到provide和inject这对方法（它们总是成对出现的），这对方法可以让我们跨多层级进行通信。也可查看vue2跨组件通信。 App.vue <template> <div id="app"> <router-view v-if="showRouterView"/> </div> ...
vue更新data值，如何重新渲染组件？
u012536222的博客
10-11 1万+
一：先介绍一下Vue.set()方法 注：如果从服务端返回的数据量较少，或者只有几个字段，可以用vue的set方法，如果数据量较大，请直接看第二种情况。 官网API是这样介绍的： Vue.set(target,key,value) 参数： {Object | Array} target {string | number} key {any} value 返回值：设置完后的新值 用法： 向响应式对象...
vue 页面重新加载渲染nextTick
yuguang的博客
10-09 4693
当vue的页面需要重新渲染，不仅仅是数据的更新，div的高度要变化的时候就要用nextTick来重新渲染页面。Vue.nextTick()：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
VUE 组件重新渲染（组件重载）的3种方式
weixin_34403976的博客
09-08 3万+
VUE 组件重新渲染（组件重载）的3种方式 我们在开发过程中页面状态变化时， 有时会需要一部分组件重新渲染， 让这些组件里的生命周期重新走一遍 下面提供 3种 方式 1.使用 v-if v-if可以实现 true (加载)和false(卸载) // html <CompTable ref="CompTable" v-if="tableShow"/> // js data() { return { tableShow: true, } } method: { // 触发更新事件
teleport ultra 爬取vue页面
09-06
Teleport Ultra 是一款强大的网页爬取工具，可以用于爬取包括 Vue 页面在内的各种网页。Vue 是一种流行的 JavaScript 框架，常用于构建现代化的单页面应用程序（SPA）。这种应用程序在页面渲染过程中使用动态编译生成 HTML 内容，对一般的爬虫工具来说，可能会遇到一些挑战。 然而，Teleport Ultra 具备了适应复杂网页的能力。它可以模拟浏览器行为，对 Vue 页面进行完整的渲染和执行。通过运行 JavaScript 代码，Teleport Ultra 可以解析 Vue 组件，动态生成网页内容，并将其保存为静态 HTML 文件。 使用 Teleport Ultra 爬取 Vue 页面的步骤如下： 1. 首先，打开 Teleport Ultra 工具，并输入要爬取的 Vue 页面的 URL。 2. 接下来，Teleport Ultra 会模拟一个浏览器环境，并加载该页面。它会执行其中的 JavaScript 代码，以确保完整的页面渲染。在这个过程中，Vue 组件会被动态编译和渲染。 3. 当页面完全加载和渲染完成后，Teleport Ultra 将生成一个静态 HTML 文件，其中包含了动态生成的内容。这个文件可以完整地展示 Vue 页面的结构和信息。 4. 最后，用户可以通过打开生成的 HTML 文件来查看爬取到的 Vue 页面。这个文件将会保留原本的布局、样式和交互效果。 总之，Teleport Ultra 是一款非常实用的工具，能够帮助我们有效地爬取包括 Vue 页面在内的各种网页。通过模拟浏览器环境和执行 JavaScript 代码，Teleport Ultra 能够很好地处理动态生成的内容，帮助我们获取所需的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值