热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue中forceupdate的使用

vue中$forceUpdate的使用登录 2019-03-28 简单总浏览:46今日浏览:4vue中的$forceUpdate是强制更新的意思,之前没太怎么用过,最近看了下,觉得


vue中的$forceUpdate是强制更新的意思,之前没太怎么用过,最近看了下,觉得还挺有意思的,一起来看看是咋用的。

深结构数据

首先我们知道在vue中,数据的绑定都不用我们操心,例如在data中有一个msg的变量,你修改它,那么在页面上,msg的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的length变成0,vue就无法知道发生了改变。

上面的demo就是一个对象数组,我们尝试直接给某个item增加一个属性,发现页面上没有效果;直接将length变成0来清空数组,也没有效果,关键代码如下:



  1. change: function(index) {//增加性别属性

  2.     this.list[index].sex = ‘男‘;

  3. },

  4. clear: function() {//清空数组

  5.     this.list.length = 0;

  6. }


隐藏代码



其实呢,上面的写法没有效果,是因为没有按照vue的规范去写,因为vue文档里面写了,对于深层的,最好用$set方法,这样vue就可以知道发生了变化,同时vue也不建议直接修改length,可以给一个空数组来置空。

上面是我们按照vue的规范去写的,是可以实现变化的,关键代码如下:



  1. change: function(index) {//增加性别属性

  2.     this.$set(this.list[index],‘sex‘,‘男‘)

  3. },

  4. clear: function() {//清空数组

  5.     this.list=[];

  6. }


可是如果我们不想利用$set去设置,非要按照我们第一种方式去写,可以实现么?答案是可以的,就是利用$forceUpdate了,因为你修改了数据,但是页面层没有变动,说明数据本身是被修改了,但是vue没有监听到而已,用$forceUpdate就相当于按照最新数据给渲染一下。

关键代码如下:



  1. change: function(index) {

  2.     this.list[index].sex = ‘男‘;

  3.     this.$forceUpdate();

  4. },

  5. clear: function() {

  6.     this.list.length = 0;

  7.     this.$forceUpdate();

  8. }



$children

$children表示当前页面的组件个数,但是如果直接在页面上引用{{$children}},往往得不到正确的结果:

这个和vue内部的实现机制有关,(vue不同版本可能不一定有此问题),可以看到,当我们用$forceUpdate之后,就会得到正确的结果。当然,一般我们也不会这么去使用,我们可以在data里面定义一个变量,在mounted之后给变量赋值this.$children.length;或者直接在mounted之后使用$forceUpdate强制刷新。


推荐阅读
  • 深入解析动态代理模式:23种设计模式之三
    在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
  • 本题要求在一组数中反复取出两个数相加,并将结果放回数组中,最终求出最小的总加法代价。这是一个经典的哈夫曼编码问题,利用贪心算法可以有效地解决。 ... [详细]
  • 本文详细探讨了 PHP 中 method_exists() 和 is_callable() 函数的区别,帮助开发者更好地理解和使用这两个函数。文章不仅解释了它们的功能差异,还提供了代码示例和应用场景的分析。 ... [详细]
  • 深入剖析JVM垃圾回收机制
    本文详细探讨了Java虚拟机(JVM)中的垃圾回收机制,包括其意义、对象判定方法、引用类型、常见垃圾收集算法以及各种垃圾收集器的特点和工作原理。通过理解这些内容,开发人员可以更好地优化内存管理和程序性能。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • 通常情况下,修改my.cnf配置文件后需要重启MySQL服务才能使新参数生效。然而,通过特定命令可以在不重启服务的情况下实现配置的即时更新。本文将详细介绍如何在线调整MySQL配置,并验证其有效性。 ... [详细]
  • 本文详细介绍了一种高效的算法——线性筛法,用于快速筛选出一定范围内的所有素数。通过该方法,可以显著提高求解素数问题的效率。 ... [详细]
  • 本文详细介绍了get和set方法的作用及其在编程中的实现方式,同时探讨了点语法的使用场景。通过具体示例,解释了属性声明与合成存取方法的概念,并补充了相关操作的最佳实践。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • Java中的基本数据类型与包装类解析
    本文探讨了Java编程语言中的8种基本数据类型及其对应的包装类。通过分析这些数据类型的特性和使用场景,以及自动拆装箱机制的实现原理,帮助开发者更好地理解和应用这些概念。 ... [详细]
  • 本文详细探讨了Java中的包管理机制,包括默认包的使用和自定义包名的创建方法。通过实际操作,帮助开发者更好地理解和应用包管理。 ... [详细]
  • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
  • 本文深入探讨了 Exchange Server 2010 中客户端访问的代理和重定向机制,特别是在跨站点环境中如何配置这些功能以确保用户能够顺利访问邮箱服务。通过详细解析不同场景下的应用,帮助管理员更好地理解和实施相关设置。 ... [详细]
  • 编写css让div2在div1的右下角? ... [详细]
  • 本文介绍了如何通过在数据库表中增加一个字段来记录文章的访问次数,并提供了一个示例方法用于更新该字段值。 ... [详细]
author-avatar
田字格
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有