Vue数据更新页面却没有更新的几种情况以及解决方法

这篇具有很好参考价值的文章主要介绍了Vue数据更新页面却没有更新的几种情况以及解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

情况一:Vue无法检测实例被创建时不存在于data中的变量

原因:由于 Vue 会在初始化实例时对 data中的数据执行 getter/setter 转化,所以 变量必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

例如: 

1
2
3
4
5
new Vue({
   data:{},
   template: '<div>{{message}}</div>'
})
this .message = 'Hello world!' // `message` 不是响应式的页面不会发生变化

解决方法:

1
2
3
4
5
6
7
new Vue({
   data: {
     message: '' ,
   },
   template: '<div>{{ message }}</div>'
})
this .message = 'Hello world!'

情况二:vue也不能检测到data中对象的动态添加和删除

例如:

1
2
3
4
5
6
7
8
9
10
new Vue({
   data:{
     obj: {
       id: 1
     }
   },
   template: '<div>{{ obj.message }}</div>'
})
this .obj.message = 'hello' // 不是响应式的
delete this .obj.id       // 不是响应式的

解决方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 动态添加 - Vue.set
Vue.set( this .obj, 'id' , 002)
// 动态添加 - this.$set
this .$set( this .obj, 'id' , 002)
// 动态添加多个
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this .obj = Object.assign({}, this .obj, { a: 1, b: 2 })
// 动态移除 - Vue.delete
Vue. delete ( this .obj, 'name' )
// 动态移除 - this.$delete
this .$ delete ( this .obj, 'name' )

情况三:变量为数组时

不能通过索引直接修改或者赋值,也不能修改数组的长度

例如:

1
2
3
4
5
6
7
8
new Vue({
   data: {
     items: [ 'a' , 'b' , 'c' ]
   }
})
this .items[1] = 'x' // 不是响应性的
this .items[3] = 'd' // 不是响应性的
this .items.length = 2 // 不是响应性的

解决方法:

1
2
3
4
5
6
7
8
9
10
// Vue.set
Vue.set( this .items, 4, 'd' )
// this.$set
this .$set( this .items, 4, 'd)
// Array.prototype.splice
this.items.splice(indexOfItem, 4, ' d')
//修改长度
this .items.splice(3)

情况四:异步获取接口数据,DOM数据不发现变化

原因:Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(funcation, 0) 代替。

例如:

1
2
3
4
5
6
7
8
9
10
<div id= "example" >{{message}}</div>
var vm = new Vue({
   el: '#example' ,
   data: {
     message: '123'
   }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 页面没有变化

解决方法:

1
2
3
4
5
6
7
8
9
10
11
12
var vm = new Vue({
   el: '#example' ,
   data: {
     message: '123'
   }
})
vm.message = 'new message' // 更改数据
//使用 Vue.nextTick(callback) callback 将在 DOM 更新完成后被调用
Vue.nextTick( function () {
   vm.$el.textContent === 'new message' // true
   vm.$el.style.color = 'red' // 文字颜色变成红色
})

情况五:循环嵌套层级太深,视图不更新

当嵌套太深时,页面也可能不更新,此时可以让页面强制刷新

this.$forceUpdate()迫使vue实例重新(rander)渲染虚拟DOM,注意并不是重新加载组件。
结合vue的生命周期,调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数,不会触发其他的钩子函数。
它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

1
2
//官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题
this .$forceUpdate();

情况六:路由参数变化时,页面不更新(数据不更新)

例如:

1
2
3
4
5
6
7
8
< div id = "app" >
   < ul >
     < li >< router-link to = "/home/foo" >To Foo</ router-link ></ li >   
     < li >< router-link to = "/home/baz" >To Baz</ router-link ></ li >   
     < li >< router-link to = "/home/bar" >To Bar</ router-link ></ li >   
   </ ul >   
   < router-view ></ router-view >
</ div >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const Home = {
   template: `<div>{{message}}</div>`,
   data() {
     return {
       message: this .$route.params.name
     }
   }
}
const router = new VueRouter({
   mode: 'history' ,
     routes: [
     {path: '/home' , component: Home },
     {path: '/home/:name' , component: Home }
   ]
})
new Vue({
   el: '#app' ,
   router
})

上段代码中,我们在路由构建选项 routes 中配置了一个动态路由 '/home/:name',它们共用一个路由组件 Home,这代表他们复用 RouterView 。

当进行路由切换时,页面只会渲染第一次路由匹配到的参数,之后再进行路由切换时,message 是没有变化的。

解决方法:

1.通过 watch 监听 $route 的变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Home = {
   template: `<div>{{message}}</div>`,
   data() {
     return {
       message: this .$route.params.name
     }
   },
   watch:{
      '$route' : function (){
         this .message = this .$route.params.name
      }
   }
}
...
new Vue({
   el: '#app' ,
   router
})

2.给<router-view> 绑定key属性,这样 Vue 就会认为这是不同的 <router-view>。

弊端:如果从 /home 跳转到 /user 等其他路由下,我们是不用担心组件更新问题的,所以这个时候 key 属性是多余的。

1
2
3
< div id = "app" >
    < router-view :key = "key" ></ router-view >
</ div >

情况七:变量通过赋值来定义的

在 Vue 中有两种类型的变量:响应式变量和非响应式变量。

从后端获取的变量通常是响应式变量,也就是说它们会被 Vue 监测到变化并同步到页面上,如果你修改了这些响应式变量,页面会随之改变。

而通过赋值来定义的变量通常是非响应式变量,如果你修改了这些非响应式变量,Vue 并不会监测到它们的变化,所以页面不会改变。

如果你需要使一个非响应式变量变成响应式变量,可以使用 Vue.set 方法或者数组的变异方法(例如 push、splice 等)。

例1:Vue.set(对象,添加的key,属性值”)

1
2
3
4
Vue.set
//这个是直接用在Vue身上的。例如: Vue.set(对象,添加的key,属性值”)
//常见于: xx.js文件中
//注意: js文件中,需要引入vue,比如: import Vue from vue

例2:this.$set(对象,添加的key',属性值)

1
2
3
this .$set
//这个是用在vm或者vc实例身上的,比如vue文件中,this.$set(对象,添加的key',属性值)
//常见于: xx.vue文件中

强制更新数据:this.$forceUpdate();文章来源地址https://www.toymoban.com/news/detail-774578.html

到了这里,关于Vue数据更新页面却没有更新的几种情况以及解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • sql数据库去重的几种情况

    本文主要总结数据库去掉重复数据的方法 去掉重复数据的方法: 第一种:distinct 根据单个字段去重,能精确去重; 作用在多个字段时,只有当这几个字段的完全相同时,才能去重; distinct只能放在SQL语句中的第一个,才会起作用 上图举例说明:图中student_name 为 tes

    2024年02月12日
    浏览(46)
  • vue前端实现将页面显示内容生成pdf文件的几种方法,html2canvas、dom-to-image、jspdf(带分页)基本使用以及介绍

    实际开发需求:vue项目中,根据数据结构生成echarts图表组件,生成带有样式的图表以后,点击下载按钮,把图表以pdf格式的文件下载到本地 实现思路:将vue界面的echarts组件生成图片,然后使用插件将生成的图片放入pdf中,再实现pdf文件的下载 涉及框架以及插件:vue、echar

    2024年01月25日
    浏览(53)
  • vue跳转页面的几种常用方法

    目录 vue跳转不同页面的方法 1.router-link跳转 2.this.$router.push() 3.a标签可以跳转外部链接,不能路由跳转 vue三种不同方式实现跳转页面 Vue:router-link this.$router.push(\\\"/\\\") this.$router.go(1) 代码示例: !-- 直接跳转 -- router-link to=\\\'/testC\\\'  button点击跳转2/button /router-link   !-- 带参数跳转

    2024年02月11日
    浏览(48)
  • Vue中 数据改变但未渲染的问题,页面中并没有自动更新,但是在控制台可以打印出来,常见解决方法

    在Vue组件中,在mounted阶段调用了一个函数去请求异步数据,将返回结果赋给data里面的值却失败了,赋值完console.log()出来明明是有值的,但页面却没有更新过来。我还一直以为是nuxt生命周期的原因,但明显不是。因为这个问题只有在偶尔才会出现,并不是每次进入页面时渲染

    2024年02月05日
    浏览(53)
  • 数据大屏--->前端实时更新数据的几种方式

    优点:最大的优点就是实现简单 缺点:(1)无用的请求多,客户端不知道服务端什么时候数据更新,只能不停的向服务端发送请求, (2)数据实时性差:客户端还是需要一段时间(3s)才能拿到最新的数据 优点:解决了短轮询每隔几秒向服务端频繁发送请求的问题; 缺点:(1)服务端资源大量消

    2024年04月17日
    浏览(64)
  • 在uni-app中,如果data中的对象属性改变了,但是页面没有相应更新的情况,通常有以下几点需要注意:

    1. 使用this.$set更新对象属性直接修改对象属性是无法触发页面更新的,需要使用this.$set方法: 2. 确保数据层级不太深如果对象层级过深,改变内层属性也可能无法触发更新。建议关键数据不要超过2层。 3. 使用深度 watcher可以在watch中用深度watcher的方式监听整个对象的变化: 4. 使用

    2024年02月16日
    浏览(44)
  • 数仓知识07:数据增量更新的几种方式

    1、增量更新的几种方式 增量更新的本质,其实是获取源表中数据变化的情况(增、删、改),然后将源表中发生的变化同步至目标表中。 不同的方式,获取源表中数据变化的情况不一样,受技术的限制、表结构的限制,某些方式可能无法获取到完整的数据变化情况,因此只

    2024年02月06日
    浏览(46)
  • 已解决:Vue改变数据后界面不自动渲染,Vue中使用v-for遍历对象数组,当给其中某个元素对象重新赋值之后,页面组件列表没有渲染更新。

    问题如标题所说,Vue中使用v-for遍历对象数组,当给数组其中某个元素对象重新赋值之后,页面组件列表没有及时更新渲染,而是在页面进行了其他的渲染操作以后列表才更新出来新的数据,那同样给对象内的属性值赋值也可能存在不渲染的情况,一并解决,尤其发生在网络

    2024年02月06日
    浏览(59)
  • Pinia 刷新页面store数据更新页面没有变化,响应式失效

    当我在组件的 setup 中使用 useStore 来获取 store 的时候,Pinia.js 的 store 已经被更新了,但是组件渲染没变化。 当count我们在结构赋值的时候数据丢失了响应式 1.计算属性 2.使用storeToRefs

    2024年02月11日
    浏览(43)
  • 关于load过高的几种情况

    Linux 中 load啥意思 \\\"Load\\\" 在 Linux 系统中通常是指系统的负载情况,也称为系统负荷。它指的是系统正在运行的进程数量以及这些进程对系统资源的使用情况,例如 CPU、内存、磁盘 I/O 等。Linux 系统的负载通常由三个数字表示,分别对应于过去 1 分钟、5 分钟和 15 分钟内的平均

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包