vue 值的更新
用了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 值的更新的更多相关文章
- Vue 子组件更新父组件的值
今天在使用Vue中遇到了一个新的需求:子组件需要修改由父组件传递过来的值,由于子组件的值是由父组件传递过来的,不能直接修改属性的值, 我们想改变传递过来的值只能通过自定义事件的形式修改父组件的值达到修 ...
- 前端 | Vue nextTick 获取更新后的 DOM
前两天在开发时遇到一个需求:打开对话框的时候自动聚焦其中的输入框.由于原生的 autofocus 属性不起作用,需要使用组件库提供的 focus 方法手动手动获取焦点.于是有如下代码: <el- ...
- HUD.2795 Billboard ( 线段树 区间最值 单点更新 单点查询 建树技巧)
HUD.2795 Billboard ( 线段树 区间最值 单点更新 单点查询 建树技巧) 题意分析 题目大意:一个h*w的公告牌,要在其上贴公告. 输入的是1*wi的w值,这些是公告的尺寸. 贴公告 ...
- vue 高度 动态更新计算 calcHeight watch $route
vue 高度 动态更新计算 calcHeight () { // this.tableHeight = window.innerHeight - 210 } }, mounted () { // co ...
- 以A表中的值快速更新B表中记录的方法
1.问题描述 有两张表,A表记录了某些实体的新属性,B表记录了每个实体的旧属性,现在打算用A中的属性值去更新B中相同实体的旧属性,如下图所示: 类似这样的需求,怎样做比较高效呢? 2.制作模拟数据 ...
- vue视图不更新情况详解
vue视图不更新情况详解:https://www.jb51.net/article/161371.htm
- Vue 数组中更新属性值后,视图不更新,等待其他元素更新后会触发的解决办法
因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. t ...
- React和Vue的组件更新比较
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...
- vue 2.6 更新变动
[原文链接] Slots:新语法,性能改进为3.0做准备改用 v-slot 指令 //默认插槽 <baz v-slot ="baz"> {{baz}} </ ba ...
随机推荐
- selenium-webdriver循环点击百度搜索结果以及获取新页面的handler
webdriver还是很有意思的,之前用过Ruby的watir的自动化测试框架,感觉selenium的这套框架更好一些,很容易就可以上手.我虽然不做自动化这块,不过先玩玩再说,多学点东西总之还是好一些 ...
- windows下Qt5.1 for android开发环境配置
1.下载安装Qt 5.1.0 for Android (Windows 32-bit, 716 MB) http://qt-project.org/downloads 2.打开Qt Creator ...
- HTTP请求(Request)和回应(Response)对象
附录H HTTP请求(Request)和回应(Response)对象 57 http://djangobook.py3k.cn/ Django使用request和response对象在系统间传递状态. ...
- 软件工程作业-(third)
1.选题目(1) 最大连续子数组和(最大子段和) 问题:给定n个整数(可能为负数)组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的子段和的最大值. ...
- java web项目部署到tomcat 8.5 此驱动程序不支持 Java Runtime Environment (JRE) 1.8 版。请使用支持 JDBC 4.0 的 sqljdbc4.jar 类库
1:项目使用的是jre1.8版本. 2:服务器 apache-tomcat-8.5.23 报错如下: 严重 [com.mchange.v2.async.ThreadPoolAsynchronousRu ...
- navicat连接centos7上mysql:2003-Can't connect to MySQL server (10060)
问题解决步骤: 1.参考http://jingyan.baidu.com/article/95c9d20dac9040ec4f75617a.html,发现是防火墙未关闭: 2.关闭并禁止firewal ...
- phpmail发送phpexcel生成的附件,php导出的Excel 作为邮件附件发送
PHP发送邮件戳这里https://www.cnblogs.com/wangzhaobo/p/8931328.html PHP导出excel戳这里https://www.cnblogs.com/wan ...
- 不用框架,原生使用python做注册接口/登陆接口/充值接口的测试,做的数据/代码分离
注意充值时候,cookie的处理方法,还是原来的三种方法 1.操作数据文件 do_exclel.py # -*- conding:utr-8 -*- #@Time :2018/11/8 22:46 ...
- RabbitMQ中交换机的消息分发机制
RabbitMQ是一个消息代理,它接受和转发消息,是一个由 Erlang 语言开发的遵循AMQP协议的开源实现.在RabbitMQ中生产者不会将消息直接发送到队列当中,而是将消息直接发送到交换机(ex ...
- Linux环境下vi/vim编辑器常用命令
使用vi文本编辑器 配置文件是Linux系统中的显著特征之一,其作用有点类似于Windows系统中的注册表,只不过注册表是集中管理,而配置文件采用了分散的自由管理方式.那么如何使用Linux字符操作界 ...