用了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. Vue 子组件更新父组件的值

    今天在使用Vue中遇到了一个新的需求:子组件需要修改由父组件传递过来的值,由于子组件的值是由父组件传递过来的,不能直接修改属性的值, 我们想改变传递过来的值只能通过自定义事件的形式修改父组件的值达到修 ...

  2. 前端 | Vue nextTick 获取更新后的 DOM

    前两天在开发时遇到一个需求:打开对话框的时候自动聚焦其中的输入框.由于原生的 autofocus 属性不起作用,需要使用组件库提供的 focus 方法手动手动获取焦点.于是有如下代码: <el- ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. vue 2.6 更新变动

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

随机推荐

  1. ASP Action函数 如何接收client传递的数据(编辑中。。。)

    参看链接:https://www.cnblogs.com/umlzhang/p/3654486.html 我这里总结一下,Action的参数的来源比较多 1.url 2.路由设定 3.post中的内容 ...

  2. a标签锚点平滑跳转

    一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top&qu ...

  3. MySQL存储过程中的事务执行失败之后获取错误信息

    1.表结构: 2. 存储过程中: 代码如下: BEGINDECLARE CONTINUE HANDLER FOR SQLEXCEPTIONBEGINROLLBACK;GET DIAGNOSTICS C ...

  4. luoguP1373 小a和uim之大逃离

    DP专题 题目链接 思路 \(f[i][j][a][b][0/1]\)表示在\((i,j)\)这个格子,小a有a滴魔液,他的伙伴有b滴,上一步是小a(0)或者他的伙伴(1)吸取的魔液. (显然)数组开 ...

  5. MySQL存储过程(PROCEDURE)(一)

    一.定义与目的: 定义:存储过程是数据库 SQL 语言层面的代码封装与重用(是数据库中存储复杂程序,以便外部程序调用的一种数据库对象): 目的:我们为了完成特定功能的SQL语句集,经编译创建并保存在数 ...

  6. 使用Postman测试https接口时的小问题记录

    测试本地的WebApi接口时,接口是https,自己写的用httpclient测试是可以的, 用postman一直连接不了.原因正是由于https,不过postman在界面上已经给出了可能的原因和解决 ...

  7. IDEA下运行 mybatis报错 Parameter 'arg0' not found. Available parameters are [autoRecharge, id, param1, param2]

    电脑换系统之后重新安装一了 一下idea 项目运行时出现了以下错误, [autoRecharge, id, param1, param2] 或 [arg0, id, arg1, param2] 参考地 ...

  8. javaScript -- touch事件详解(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  9. .net 第一次请求比较慢

    为了提高访问速度,也便有了预编译. 关于ASP.NET网站:每个页面都编译成一个.dll文件 用Assembly.GetExecutingAssembly().Location 查看 而ASP.NET ...

  10. python案例——体脂率项目

    通过一个人的身高.体重.年龄.性别,判断这个人的体脂率,并且反馈是否正常? 首先接到项目后一定要一步步细分任务,直到每个细分的任务都可以用代码来实现. 写代码之前,先要确定python版本的问题 然后 ...