vue 值的更新

时间:2022-05-23 00:46:01

   用了vue开发了一段时间,基本上感觉都是比较好用的一个框架,刚开始还是会存在一些小坑的东西,这里先浅谈下值的更新问题。

  1.本组件的一些变量,或者是主view(路由页面)一些值,是通过vuex 中state赋值的话,因为是全局变量。所以不会切换路由而初始化的,所以这种缓存的值会造成一定的困扰,详细的可以看看另外一篇博客,浅谈 vuex state,里面有具体的例子。 对于这种问题,目前我自己的方法就是苦逼的初始化咯。自己手动重新赋值就是了。

  2 在dom更新时,相应的值也不一定能及时刷新在dom上,因为异步的原因,会有dom刷新快的,而赋值慢的,最后就是数据显示不正确了。在上面说的那篇博客就是如此,

通过state赋值,但是页面上并不能立即更新。    对于这个问题,只需要在dom刷新之前赋值就行了,vue里面有create,即在该组件页面未生成时可以通过这个方法赋值,还有一个nextTick:

  • 参数:

    • {Function} [callback]
  • 用法:

    将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

    2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不是原生支持 Promise (IE:你们都看我干嘛),你得自行 polyfill。

 上面是官网的介绍,我就直接拿了。意思就是说,在dom更新之前,可以通过该api赋值,那么dom更新后就没问题了

vue 值的更新的更多相关文章

  1. HUD.2795 Billboard ( 线段树 区间最值 单点更新 单点查询 建树技巧)

    HUD.2795 Billboard ( 线段树 区间最值 单点更新 单点查询 建树技巧) 题意分析 题目大意:一个h*w的公告牌,要在其上贴公告. 输入的是1*wi的w值,这些是公告的尺寸. 贴公告 ...

  2. vue 高度 动态更新计算 calcHeight watch $route

    vue 高度 动态更新计算 calcHeight () { // this.tableHeight = window.innerHeight - 210 } }, mounted () { // co ...

  3. 以A表中的值快速更新B表中记录的方法

    1.问题描述 有两张表,A表记录了某些实体的新属性,B表记录了每个实体的旧属性,现在打算用A中的属性值去更新B中相同实体的旧属性,如下图所示: 类似这样的需求,怎样做比较高效呢? 2.制作模拟数据   ...

  4. vue视图不更新情况详解

    vue视图不更新情况详解:https://www.jb51.net/article/161371.htm

  5. Vue 数组中更新属性值后,视图不更新,等待其他元素更新后会触发的解决办法

    因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. t ...

  6. React和Vue的组件更新比较

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  7. vue 2.6 更新变动

    [原文链接] Slots:新语法,性能改进为3.0做准备改用 v-slot 指令 //默认插槽 <baz v-slot ="baz"> {{baz}} </ ba ...

  8. el-select 选项值动态更新的问题

      如果 类似 el-select 等表单元素绑定了 类似 a.b 之类的属性,而不是直接的一级属性的话,当这个属性发生更改的时候,它的显示效果可能不会动态地进行更新,这个时候需要使用 Vue.$se ...

  9. ngModel 值不更新&sol;显示

    angular中的$scope是页面(view)和数据(model)之间的桥梁,它链接了页面元素和model,也是angular双向绑定机制的核心. 而ngModel是angular用来处理表单(fo ...

随机推荐

  1. Mysql手册—基本规范与数据类型

    第十章      本章主要介绍了一些语法规范,如 对于表,函数,字段,在Linux上大小写敏感,Windows和MacOS上却不敏感: Mysql是如何识别函数的及用户在定义自定义函数时命名要求:通过 ...

  2. js正则表达式实例(汇总)

    来源:如何用JAVASCRIPT 正则表达式取出字符串最后一组数字,谢谢  如  30CAC0040 取出40  3SFASDF92 取出92  正则如下://d+$/g   统一空格个数  来源:正 ...

  3. Java 中的 Characters

    1.一般情况下,如果使用单一的 character 值,应该使用原始的 char 类型.比如: public class TestCharacter { public static void main ...

  4. JUQERY 获取同名称的所有CHECKBOX &comma;获取已经选择的,并且jquery进行勾选!

    var @(Perfix)_CheckArray=[]; @(Perfix)_CheckArray.length=0; var checkedItems = $('input[name="@ ...

  5. 使用AlarmManager设置闹钟----之二

    import android.media.MediaPlayer;import android.os.Bundle;import android.app.Activity;import android ...

  6. QT小技巧(书上没有的)

    1. Layout本身不能控制隐藏和显示,但是可以在外面专门套一个Widget,然后控制这个Widget就可以达到相应的效果了. 2. 空目录居然也存在 if (QDir(""). ...

  7. css案例学习之双斜角横线菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. 转&colon; angularjs学习总结&lpar;~~很详细的教程&rpar;

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  9. Web学习-apache视图log刊物

    视图apache刊物 apache日志位置 不同的系统位置不同. widnows 假如是windows的话,xampp下应该是都存在的,直接去找apache的folder/log/access.log ...

  10. springboot 自定义Repository

    启用 JpaRepositories package cn.xiaojf; import cn.xiaojf.today.data.rdb.repository.RdbCommonRepository ...