js更新数组对象_7 种Vue 数据已更新而页面没有更新的情况及深化总结(收藏)

作者:前端1943

链接:https://segmentfault.com/a/1190000022772025

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

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

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

场景:

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

解决办法:

var vm = new Vue({  data: {    // 声明 a、b 为一个空值字符串    message: '',  },  template: '
{{ message }}
'})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: '
{{ obj.message }}
'})vm.obj.message = 'hello' // 不是响应式的delete vm.obj.id // 不是响应式的

解决办法:

// 动态添加 - Vue.setVue.set(vm.obj, propertyName, newValue)// 动态添加 - vm.$setvm.$set(vm.obj, propertyName, newValue)// 动态添加多个// 代替 Object.assign(this.obj, { a: 1, b: 2 })this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })// 动态移除 - Vue.deleteVue.delete(vm.obj, propertyName)// 动态移除 - vm.$deletevm.$delete(vm.obj, propertyName)

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

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

场景:

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

解决办法:

// Vue.setVue.set(vm.items, indexOfItem, newValue)// vm.$setvm.$set(vm.items, indexOfItem, newValue)// Array.prototype.splicevm.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'  // 触发 setterarr[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.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。

场景:

{{message}}
var vm = new Vue({  el: '#example',  data: {    message: '123'  }})vm.message = 'new message' // 更改数据vm.$el.textContent === 'new message' // falsevm.$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' // 文字颜色变成红色})

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

{{message.text}}
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。

730ad1abc71eb29bb25ea3fa15e7ca3b.png

具体流程如下所示:

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

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

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

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

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

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

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

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

vm.$forceUpdate()

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

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

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

场景:

To Foo To Baz To Bar
const Home = {  template: `
{{message}}
`, 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 的变化。const Home = { template: `
    {{message}}
    `, data() { return { message: this.$route.params.name } }, watch: { '$route': function() { this.message = this.$route.params.name } } } ... new Vue({ el: '#app', router })
  2. 给 绑定 key 属性,这样 Vue 就会认为这是不同的 。弊端:如果从 /home 跳转到 /user 等其他路由下,我们是不用担心组件更新问题的,所以这个时候 key 属性是多余的。
    ...

参考:

  • 对 Vue 响应式数据更新的误解 -:https://github.com/xiaofuzi/deep-in-vue/issues/11
  • [小丸子的城堡] -:https://www.cnblogs.com/youhong/p/12173354.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从P560小型机B181201B故障代码识别手把手详解

背景:生产小型机发生宕机事件,现场发现液晶面板存在B181201B代码,可是查看网络,未见有权威的参考文章,通过管理口登录HMC管理界面,发现错误代码B181201B,同时提示可能是电源故障,后登…

Python 之 线程

进程 之前我们已经了解了操作系统中进程的概念,程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程。程序和进程的区别就在于:程序是指令的集合,它是进程…

flymcu无法打开串口_西门子1200与其他PLC/组态软件无线串口通讯(自由口)

一、控制系统原理图1:控制系统原理二、硬件需求S7-1200 PLC目前有3种类型的CPU:1)S7-1211C CPU2)S7-1212C CPU3)S7-1214C CPU这三种类型的CPU都可以连接三个串口通信模版本例中使用的PLC硬件为:1)PM1207电源(6EP1 332-1SH71)2)S7-1214C(6ES7 214-1BE30-0…

收银管理系统怎样帮助商家很好地经营服装门店

收银管理系统对于服装门店的经营可以提供多方面的帮助,以下是一些具体的优势和功能: 1. 快速准确的收银:收银管理系统可以实现快速、准确的收银操作,通过条码扫描或手动输入商品信息,自动计算价格并生成收据。这样可以…

Python 之 进程

目录 理论知识 操作系统背景知识 进程 什么是进程 进程调度 进程的并行与并发 同步异步阻塞非阻塞 同步和异步 阻塞与非阻塞 同步/异步与阻塞/非阻塞 组合 进程的创建与结束 进程的创建 进程的结束 在python程序中的进程操作 multiprocess(multiproc…

metric learning -- 马氏距离与欧氏距离

一 基本概念 方差:(variance)是在概率论和统计方差衡量随机变量或一组数据时离散程度的度量。概率论中方差用来度量随机变量和其数学期望(即均值)之间的偏离程度。统计中的方差(样本方差)是每个…

深入理解 C# 协变和逆变

msdn 解释如下: “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型。 “逆变”则是指能够使用派生程度更小的类型。 解释的很正确,大致就是这样,不过不够直白。 直白的理解: “协变”->”和谐的变”…

华为mate20能用鸿蒙吗,华为mate20可以用5g网络吗

华为mate20不可以用5g网络,它是4g手机在2018年上市,当时5g并没有开始流行,因此mate20是不支持5G的。不过在后来的2019年秋季,华为发布了mate20 x的5g版本,这也是mate20系列里唯一支持5G的,除此之外mate20、…

基本农田卫星地图查询_#重庆朝天门#谷歌百度腾讯高德“卫星地图”PK,谷歌更胜一筹...

截图自便民查询网,各家卫星地图PK,各有千秋~谷歌精确度最高:5m,来福士修建中,嘉陵江是绿的,长江是黄的。两江交汇处有一条分明的界线。谷歌 5m:20ft谷歌 50m:100ft谷歌 200m:500ft谷歌 300m:1000ft谷歌 500…

Python 第三方库之 Celery 分布式任务队列

一、Celery介绍和使用: Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理, 如果你的业务场景中需要用到异步任务,就可以考虑使用celery, 举几个实例场景中可用的例子: 你想…

windows server 2008 (五)web服务器的搭建和部署

Windows server 2008 web服务器的搭建和部署相对于windows server 2003的IIS6来说,windows server 2008推出的IIS7.0为管理员提供了统一的web平台,为管理员和开发人员提供了一个一致的web解决方案。并针对安全方面做了改进,可以减少利用自定义…

改装摩托车

摩托车发动机就是将进入气缸中的燃料混合气点燃使其燃烧所产生的热能变为机械能,并由曲轴将动力通过传动机构传给摩托车后轮而变为车辆行驶动力的机械。发动机的进排气量和气流速是影响高转速(功率)输出的关键因素之一。 发动机工作时气流的路…

华为鸿蒙os logo,华为鸿蒙OS Logo曝光:Powered by HarmonyOS

IT之家 9 月 13 日消息 9 月 10 日,鸿蒙 OS 2.0 亮相华为开发者大会的主舞台上,华为常务董事、消费者业务 CEO 余承东表示,鸿蒙 OS 是首个真正为全场景时代打造的分布式操作系统,鸿蒙 OS 2.0 全面使能全场景生态。现在博主 勇气数…

python判断语句_详解Python判断语句的使用方法

本篇介绍Python判断语句的使用,主要讨论简单条件语句、多重条件语句和嵌套条件语句,在讲解的每个案例中都配有流程图和代码说明。通过本篇的学习,可以达成如下目标。 ● 掌握判断语句的使用规则 ● 判断语句流程图的画法 前面我们学习了Pytho…

js setTimeout 使用方法

在项目过程中遇到一些异步加载和其他js方法冲突的问题: 如图初始化的时候会加载“商户基本信息”,修改商户名称字段第二个页面也需要修改: function setSeqAndName(){var pritab2 $("#allTabs").tabs("getTab", 1).find("ifra…

机器学习算法之 logistic、Softmax 回归

逻辑回归本质是分类问题,而且是二分类问题,不属于回归,但是为什么又叫回归呢。我们可以这样理解,逻辑回归就是用回归的办法来做分类。它是在线性回归的基础上,通过Sigmoid函数进行了非线性转换,从而具有更强…

程序员成功之路

程序员成功之路 ——The road ahead for programmer(演讲稿) 一、我很羡慕在座的各位同学,因为你们是中国未来的程序员,而我不是,我一直很遗憾。 比尔盖茨曾经写过一本书叫做《未来之路》The road ahead, 那么今天我选…

部署egg需要用到pm2吗_使用宝塔面板部署校园综合服务平台项目

本文档为校园综合服务平台服务端的安装部署教程,欢迎star小程序端下载地址:https://github.com/landalfYao/help.git后台服务端下载地址:https://github.com/landalfYao/helpserver.git后台客户端下载地址:https://github.com/lan…

机器学习算法之线性回归

一、什么是回归算法 回归算法是一种有监督算法 回归算法是一种比较常用的机器学习算法,用来建立“解释”变量(自变量X)和观测值(因变量Y)之间的关系;从机器学习的角度来讲,用于构建一个算法模型(函数)来做属性(X)与标签(Y)之间的映射关系&a…

Console-算法[for]-国王与老人的六十四格

ylbtech-Arithmetic:Console-算法[for]-国王与老人的六十四格1.A,案例-- -- ylb:算法-- Type:算法[for]-- munu:国王与老人的六十四格-- 20:32 2012/3/16-- 案例:印度有个国王,他拥有超人的权力和巨大的财富。但权力和财富最终让他…