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时,会有两次显示,第一次没有数据,因而会报错,第二次才有数据,给人的感觉是, computedmounted先执行,而且是执行多次,因而导致报错,思来想去,最后在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的更多相关文章

  1. vue+ vue-router + webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

  2. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  3. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  4. 微信小程序之mpvue+iview踩坑之旅

    因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...

  5. Python踩坑之旅其一杀不死的Shell子进程

    目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4 坑后扩展 1.4.1 扩展知识 1.4.1 技术关键字 1.5 填坑总结 1.1 踩坑案例 踩坑的程序是个常驻的Agent类管理进程 ...

  6. Python 踩坑之旅进程篇其三pgid是个什么鬼 (子进程\子孙进程无法kill 退出的解法)

    目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4.1 技术关键字 下期坑位预告 代码示例支持 平台: Centos 6.3 Python: 2.7.14 Github: https: ...

  7. [代码修订版] Python 踩坑之旅 [进程篇其四] 踩透 uid euid suid gid egid sgid的坑坑洼洼

    目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4 技术关键字 1.5 坑后思考 下期坑位预告 代码示例支持 平台: Centos 6.3 Python: 2.7.14 代码示例: 公 ...

  8. CentOS7使用tar.gz包安装MySql的踩坑之旅

    由于客户的CentOS服务器没有安装yum工具,只能通过下载tar.gz包安装mysql,于是跟着万能的百度开启了漫漫踩坑之旅: 1.下载mysql-5.6.33-linux-glibc2.5-x86 ...

  9. EasyTrader踩坑之旅总结

    ​ easytrader是用python写的可以调用主要券商完成自动化炒股的一个软件 ,但我用的是同花顺,在研究过程中,发现同花顺暂时调不通.后来搜索发现thstrade的源码作者说是easytrad ...

随机推荐

  1. exec-maven-plugin配置及使用

    背景: 如果你想在项maven生命周期内,运行一段java代码,或者一段独立的程序,或者说我们所指的预执行,初始化某些值,生成某些不能预先生成的文件.那么这样我们就可以使用exec-maven-plu ...

  2. linux搭建svn服务并手动同步代码到web目录和自动更新

    1.安装svn服务端 yum -y install subversion 2.查看安装路径等信息 rpm -ql subversion 3.查看svn帮助信息 svn help 4.创建svn版本库目 ...

  3. cmd中测试常用到的命令汇总

    1.最常用的 ping +ip 2.测试到远程服务器之间是否通的命令 telnet +ip +端口 3.路由跟踪,通过跟踪可以找到到哪地方不通 tracert ip      linux系统  tra ...

  4. HTTP-java访问https资源时,忽略证书信任问题,代码栗子

    java程序在访问https资源时,出现报错 sun.security.validator.ValidatorException: PKIX path building failed: sun.sec ...

  5. mysql字符串分割操作

    SELECT '1,2,3,4,5,6,7,8' FROM dual; -- 列转行分割 ),) FROM () a JOIN mysql.help_topic b ); -- 测试 ),) as p ...

  6. java如何调用接口 2

    在实际开发过程中,我们经常需要调用对方提供的接口或测试自己写的接口是否合适,所以,问题来了,java如何调用接口?很多项目都会封装规定好本身项目的接口规范,所以大多数需要去调用对方提供的接口或第三方接 ...

  7. 在centos 6.9下Protocol Buffers数据传输及存储协议的使用(python)

    我们知道Protocol Buffers是Google定义的一种跨语言.跨平台.可扩展的数据传输及存储的协议,因为将字段协议分别放在传输两端,传输数据中只包含数据本身,不需要包含字段说明,所以传输数据 ...

  8. jquery 报错 $.cookie is not a function()

    jquery 报错 $.cookie is not a function() ——我是之前可以运行的项目,突然报这个错误,很奇怪. 这是jquery的cookie插件报错. 插件名: jquery.c ...

  9. 【边框回归】边框回归(Bounding Box Regression)详解(转)

    转自:打开链接 Bounding-Box regression 最近一直看检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年 ...

  10. Objective C NSString 编码成URL 特殊字符处理

    找了一下网上的教程都是使用类似以下代码,Xcode提示这个CoreFoundation不受ARC管理,所以折中的方式是添加__bridge. NSString *encodedValue = (__b ...