详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结


Posted in Javascript onMay 28, 2020

如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。

1. Vue 无法检测实例被创建时不存在于 data 中的 property

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

场景:

var vm = new Vue({
 data:{},
 // 页面不会变化
 template: '<div>{{message}}</div>'
})
vm.message = 'Hello!' // `vm.message` 不是响应式的

解决办法:

var vm = new Vue({
 data: {
  // 声明 a、b 为一个空值字符串
  message: '',
 },
 template: '<div>{{ message }}</div>'
})
vm.message = 'Hello!'

2. Vue 无法检测对象 property 的添加或移除

原因:官方 - 由于 JavaScript(ES5) 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

场景:

var vm = new Vue({
 data:{
  obj: {
   id: 001
  }
 },
 // 页面不会变化
 template: '<div>{{ obj.message }}</div>'
})

vm.obj.message = 'hello' // 不是响应式的
delete vm.obj.id    // 不是响应式的

解决办法:

// 动态添加 - Vue.set
Vue.set(vm.obj, propertyName, newValue)

// 动态添加 - vm.$set
vm.$set(vm.obj, propertyName, newValue)

// 动态添加多个
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })

// 动态移除 - Vue.delete
Vue.delete(vm.obj, propertyName)

// 动态移除 - vm.$delete
vm.$delete(vm.obj, propertyName)

3. Vue 不能检测通过数组索引直接修改一个数组项

原因:官方 - 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化;尤雨溪 - 性能代价和获得用户体验不成正比。

场景:

var vm = new Vue({
 data: {
  items: ['a', 'b', 'c']
 }
})
vm.items[1] = 'x' // 不是响应性的

解决办法:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// vm.$set
vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

拓展:Object.defineProperty() 可以监测数组的变化

Object.defineProperty() 可以监测数组的变化。但对数组新增一个属性(index)不会监测到数据变化,因为无法监测到新增数组的下标(index),删除一个属性(index)也是。

场景:

var arr = [1, 2, 3, 4]
arr.forEach(function(item, index) {
  Object.defineProperty(arr, index, {
  set: function(value) {
   console.log('触发 setter')
   item = value
  },
  get: function() {
   console.log('触发 getter')
   return item
  }
 })
})
arr[1] = '123' // 触发 setter
arr[1]     // 触发 getter 返回值为 "123"
arr[5] = 5   // 不会触发 setter 和 getter

4. Vue 不能监测直接修改数组长度的变化

原因:官方 - 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化;尤雨溪 - 性能代价和获得用户体验不成正比。

场景:

var vm = new Vue({
 data: {
  items: ['a', 'b', 'c']
 }
})
vm.items.length = 2 // 不是响应性的

解决办法:

vm.items.splice(newLength)

5. 在异步更新执行之前操作 DOM 数据不会变化

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

场景:

<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' // 页面没有变化

解决办法:

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' // 文字颜色变成红色
})

拓展:异步更新带来的数据响应的误解

<!-- 页面显示:我更新啦! -->
<div id="example">{{message.text}}</div>
var vm = new Vue({
 el: '#example',
 data: {
  message: {},
 }
})
vm.$nextTick(function () {
 this.message = {}
 this.message.text = '我更新啦!'
})

上段代码中,我们在 data 对象中声明了一个 message 空对象,然后在下次 DOM 更新循环结束之后触发的异步回调中,执行了如下两段代码:

this.message = {};
this.message.text = '我更新啦!'

到这里,模版更新了,页面最后会显示 我更新啦!

模板更新了,应该具有响应式特性,如果这么想那么你就已经走入了误区。

一开始我们在 data 对象中只是声明了一个 message 空对象,并不具有 text 属性,所以该 text 属性是不具有响应式特性的。

但模板切切实实已经更新了,这又是怎么回事呢?

那是因为 Vue.js 的 DOM 更新是异步的,即当 setter 操作发生后,指令并不会立马更新,指令的更新操作会有一个延迟,当指令更新真正执行的时候,此时 text 属性已经赋值,所以指令更新模板时得到的是新值。

模板中每个指令/数据绑定都有一个对应的 watcher 对象,在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时,会触发 watcher 重新计算 ,也就会导致它的关联指令更新 DOM。

详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

具体流程如下所示:

  • 执行 this.dataObj = {}; 时, setter 被调用。
  • Vue.js 追踪到 message 依赖的 setter 被调用后,会触发 watcher 重新计算。
  • this.message.text = 'new text'; 对 text 属性进行赋值。
  • 异步回调逻辑执行结束之后,就会导致它的关联指令更新 DOM,指令更新开始执行。

所以真正的触发模版更新的操作是 this.message = {};这一句引起的,因为触发了 setter,所以单看上述例子,具有响应式特性的数据只有 message 这一层,它的动态添加的属性是不具备的。

对应上述第二点 - Vue 无法检测对象 property 的添加或移除

6. 循环嵌套层级太深,视图不更新?

看到网上有些人说数据更新的层级太深,导致数据不更新或者更新缓慢从而导致试图不更新?

由于我没有遇到过这种情况,在我试图重现这种场景的情况下,发现并没有上述情况的发生,所以对于这一点不进行过多描述(如果有人在真实场景下遇到这种情况留个言吧)。

针对上述情况有人给出的解决方案是使用强制更新:

如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。

vm.$forceUpdate()

7. 拓展:路由参数变化时,页面不更新(数据不更新)

拓展一个因为路由参数变化,而导致页面不更新的问题,页面不更新本质上就是数据没有更新。

原因:路由视图组件引用了相同组件时,当路由参会变化时,会导致该组件无法更新,也就是我们常说中的页面无法更新的问题。

场景:

<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>
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 是没有变化的。

解决办法:

解决的办法有很多种,这里只列举我常用到几种方法。

通过 watch 监听 $route 的变化。

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
})

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

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

<div id="app">
 ...
 <router-view :key="key"></router-view>
</div>

参考:

对 Vue 响应式数据更新的误解 - https://github.com/xiaofuzi/deep-in-vue/issues/11

[小丸子的城堡] - https://www.cnblogs.com/youhong/p/12173354.html

到此这篇关于详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结的文章就介绍到这了,更多相关Vue 数据更新内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
javascript 写类方式之四
Jul 05 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
Vue实现附件上传功能
May 28 #Javascript
如何使用Javascript中的this关键字
May 28 #Javascript
简单了解JavaScript arguement原理及作用
May 28 #Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 #Javascript
js实现轮播图特效
May 28 #Javascript
JS写滑稽笑脸运动效果
May 28 #Javascript
Python版实现微信公众号扫码登陆
May 28 #Javascript
You might like
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
浅谈js中的闭包
2015/03/16 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
python opencv读mp4视频的实例
2018/12/07 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
日语求职信范文
2013/12/17 职场文书
个人实习生的自我评价
2014/02/16 职场文书
教师自我鉴定范文
2014/03/20 职场文书
关于安全的演讲稿
2014/05/09 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
债务授权委托书范本
2014/10/17 职场文书
新郎答谢词
2015/01/04 职场文书
小学教师个人总结
2015/02/05 职场文书
python爬虫selenium模块详解
2021/03/30 Python
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android