vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch
经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊
技术点
- vue + element + ehcarts + vuex + vue-router
问题再现
data() {
return {
option: {
chart: '' //echarts的实例
}
}
},
//钩子函数
mounted() {
this.chart = echarts.init(this.$refs.charts) // 使用vue提供得ref来获取dom
this.chart.setOption(this.option) // 初始化数据
},
computed: {
...mapState({
option(state) {
const state = state.state.option
//this.chart.setOption(state)
return state
}
})
},
watch: {
this.option(oldVal, newVla) {
this.chart.setOption(state)
}
}
- 当动态获取的数据回来时,
computed
中调用setOption
时,会有两次显示,第一次没有数据,因而会报错,第二次才有数据,给人的感觉是,computed
比mounted
先执行,而且是执行多次,因而导致报错,思来想去,最后在watch
中调用时才得以解决 - 这个让我想起另一个例子,当时也是拿数据,有一个数据是在
sessionStorage
中获取,当时这个数据是本地的,因而会现出来,但是要求是后出来,放在watch
中解决,虽然watch
是监听路由,数据,但是也可以作为数据先后展示的重要函数
新的发现
computed
: 假设用来获取vuex
中的数据
- 思考一
computed: {
...mapState({
//假设的值
timeList(state) {
return state.timeList
}
})
}
若是想直接使用
timeList
可以在template
模板中调用,但是若是没有使用,需要查看timeList
的值,可以在watch
中,进行监听即可。之前一直存在误区,以为必须在watch
中进行监听,才可以拿到值,现在想想完全没有必要,除非进行业务逻辑处理而已
- 思考二
在上面的问题,提到
computed
会执行两次,而第一次是没有数据的,需要额外进行处理。今天用一种简单的方式即可解决
computed: {
...mapState({
//假设的值
timeList(state) {
const timeList = state.timeList
if (timeList.length == 0) return
//业务逻辑处理
return state.timeList
空 }
})
}
简单地进行判断即可,若是空,直接跳出函数
个人的一些总结:
computed
在使用时,一定要注意,函数里面的变量都会被监听,只要里面的某一个值变动,便会将整个函数执行一遍,这样会有很多坑在里面,因而考虑如何不在里面使用watch
只是监听某一个值,若是监听的值里面也有很多变量,也会全部监听
vue踩坑之旅 -- computed watch的更多相关文章
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
- 我的微信小程序入门踩坑之旅
前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
- 微信小程序之mpvue+iview踩坑之旅
因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...
- Python踩坑之旅其一杀不死的Shell子进程
目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4 坑后扩展 1.4.1 扩展知识 1.4.1 技术关键字 1.5 填坑总结 1.1 踩坑案例 踩坑的程序是个常驻的Agent类管理进程 ...
- Python 踩坑之旅进程篇其三pgid是个什么鬼 (子进程\子孙进程无法kill 退出的解法)
目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4.1 技术关键字 下期坑位预告 代码示例支持 平台: Centos 6.3 Python: 2.7.14 Github: https: ...
- [代码修订版] Python 踩坑之旅 [进程篇其四] 踩透 uid euid suid gid egid sgid的坑坑洼洼
目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4 技术关键字 1.5 坑后思考 下期坑位预告 代码示例支持 平台: Centos 6.3 Python: 2.7.14 代码示例: 公 ...
- CentOS7使用tar.gz包安装MySql的踩坑之旅
由于客户的CentOS服务器没有安装yum工具,只能通过下载tar.gz包安装mysql,于是跟着万能的百度开启了漫漫踩坑之旅: 1.下载mysql-5.6.33-linux-glibc2.5-x86 ...
- EasyTrader踩坑之旅总结
easytrader是用python写的可以调用主要券商完成自动化炒股的一个软件 ,但我用的是同花顺,在研究过程中,发现同花顺暂时调不通.后来搜索发现thstrade的源码作者说是easytrad ...
随机推荐
- exec-maven-plugin配置及使用
背景: 如果你想在项maven生命周期内,运行一段java代码,或者一段独立的程序,或者说我们所指的预执行,初始化某些值,生成某些不能预先生成的文件.那么这样我们就可以使用exec-maven-plu ...
- linux搭建svn服务并手动同步代码到web目录和自动更新
1.安装svn服务端 yum -y install subversion 2.查看安装路径等信息 rpm -ql subversion 3.查看svn帮助信息 svn help 4.创建svn版本库目 ...
- cmd中测试常用到的命令汇总
1.最常用的 ping +ip 2.测试到远程服务器之间是否通的命令 telnet +ip +端口 3.路由跟踪,通过跟踪可以找到到哪地方不通 tracert ip linux系统 tra ...
- HTTP-java访问https资源时,忽略证书信任问题,代码栗子
java程序在访问https资源时,出现报错 sun.security.validator.ValidatorException: PKIX path building failed: sun.sec ...
- mysql字符串分割操作
SELECT '1,2,3,4,5,6,7,8' FROM dual; -- 列转行分割 ),) FROM () a JOIN mysql.help_topic b ); -- 测试 ),) as p ...
- java如何调用接口 2
在实际开发过程中,我们经常需要调用对方提供的接口或测试自己写的接口是否合适,所以,问题来了,java如何调用接口?很多项目都会封装规定好本身项目的接口规范,所以大多数需要去调用对方提供的接口或第三方接 ...
- 在centos 6.9下Protocol Buffers数据传输及存储协议的使用(python)
我们知道Protocol Buffers是Google定义的一种跨语言.跨平台.可扩展的数据传输及存储的协议,因为将字段协议分别放在传输两端,传输数据中只包含数据本身,不需要包含字段说明,所以传输数据 ...
- jquery 报错 $.cookie is not a function()
jquery 报错 $.cookie is not a function() ——我是之前可以运行的项目,突然报这个错误,很奇怪. 这是jquery的cookie插件报错. 插件名: jquery.c ...
- 【边框回归】边框回归(Bounding Box Regression)详解(转)
转自:打开链接 Bounding-Box regression 最近一直看检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年 ...
- Objective C NSString 编码成URL 特殊字符处理
找了一下网上的教程都是使用类似以下代码,Xcode提示这个CoreFoundation不受ARC管理,所以折中的方式是添加__bridge. NSString *encodedValue = (__b ...