Vue computed参数与各生命周期关系(主要是异步的时候)

前面聊了vue生命周期与路由的先后顺序,现在聊聊computed与各生命周期。先聊一下需求背景,我在做一个图表的时候遇到了,我将图表样式封装为一个组件,然后各个地方需要的时候将数据通过props传入到组件自动画图。因为我这个数据会变化,我的方法里面又有比较多的方法了,就像弄到计算属性里面去,这样在data里面也可以少定义一个属性,然后问题就来了。我在子组件里面读取的props竟然是未定义!!这个问题留到后面解释。

上次我们知道了父组件子组件生命周期的关系,同理我在computed当中定义了一个属性

computed:{test:function(){return '我是test'}}

然后我在父组件和子组件生命周期当中都打印出来了。当然我们的computed肯定是有一定的逻辑代码才对的,所以我有写下了这样的测试

data:{a:23,b:32
},
computed:{test(){return this.a+this.b;}      
}

结果与上面一致,那么说明computed的属性是在created之前就已经执行了。

好这个时候回到我们的问题,我在computed里面定义的为什么在子组件props里面未定义呢。

基于上面的结论我在父级打印我的test发现未定义,那么这个时候子组件的未定义就可以理解了。先贴上我的代码吧

computed:{test(){this.ajax.get('url').then((res)=>{
return res.data;
})      }  
}

相信很多人已经明白了,我这是一个异步操作,然而computed在beforeCreate的时候就已经执行了。这个时候我的test相当于没有东西,当然是未定义了。所以导致我整个结构崩盘。

后来我的做法

在data里面定义好test,然后在方法里面建一个_test方法获取数据以后去修改test。然后在子组件的watch里面定义一个监听,监听这个test,test变化就绘图。

其实在computed里面我也尝试过用watch去监听,然后发现问题。computed里面的属性是没有直接的双向数据绑定的。我在<input v-model='test'>直接修改是没用的,只能修改它依赖的data属性。官方也解释了计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。

总结computed是严重依赖data属性的,如果computed里面没有依赖data里面的属性,那就不要用computed了,真心没用后面都没办法去修改。

写的好像有些乱啊,反正我看了,不用吃枪吃毒了。

转载于:https://www.cnblogs.com/axl-study/p/7098169.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488046.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

场景切割CVPr2022 SceneSegmentation

目录 算法介绍 无监督训练原理 源码地址: lstm模块 bilstm opencv场景分割 加阈值:

工业机器人 答案 韩建海_不可或缺:协作机器人对于制造业转型升级的意义

只要谈到自动化&#xff0c;就很难不提到协作机器人。自从十几年前协作机器人问世以来&#xff0c;它们便承担起了众多企业的自动化任务。新冠之前&#xff0c;英国制造业正在应对英国退欧和劳工短缺的不确定性。但是&#xff0c;他们无法预见新冠对行业的影响。任何行业都无法…

Python爬虫用Selenium抓取js生成的文件(一)

简介任务简述实现过程 简介 我最近在看关于计算机的一些书籍,发现了这个电子书清单:计算机开放电子书汇总, 和大家分享一下. 我在下载其中的书籍时被导向了这个很好的计算机电子书网站KanCloud看云,里面有非常多的实用的编程方面的电子书,很多是该网站自己用html生成的,格式多…

golang 升级到新版本_Scikit-learn新版本发布,一行代码秒升级

十三 发自 凹非寺 量子位 报道 | 公众号 QbitAIScikit-learn&#xff0c;这个强大的Python包&#xff0c;一直深受机器学习玩家青睐。而近日&#xff0c;scikit-learn 官方发布了 0.22 最终版本。此次的更新修复了许多旧版本的bug&#xff0c;同时发布了一些新功能。安装最新版…

重磅:2020年度获国家科学技术奖励提名的材料项目汇总

来源&#xff1a;http://www.nosta.gov.cn/upload/2020slxmgb/showProject.html转自&#xff1a;材料人2020年3月24日&#xff0c;科学技术部发布了《国家科学技术奖励工作办公室公告第95号》文件。这份文件对2020年国家自然科学奖、国家技术发明奖通用项目、国家科学技术进步奖…

完全理解Android中的RemoteViews

一、什么是RemoteViewsRemoteViews翻译过来就是远程视图.顾名思义,RemoteViews不是当前进程的View,是属于SystemServer进程.应用程序与RemoteViews之间依赖Binder实现了进程间通信.二、RemoteViews的用法RemoteViews使用最多的场合是通知栏和桌面小插件. 以通知栏为例,讲解下它…

各大媒体优劣对比_吉利星瑞特别版对比朗逸,亮点只有性价比?

据悉&#xff0c;吉利汽车推出了星瑞特别版车型——星瑞设计师推荐款&#xff0c;新车已于10月11日的11:00开启抢购&#xff0c;限量3000辆&#xff0c;抢购价格为13.77万元。其中值得注意的是&#xff0c;新车的抢购流程有所不同&#xff0c;想参与抢购的消费者需要先完成吉利…

【推广】实用命令——tldr

碎碎念如题&#xff0c;通常遇到一个新的命令需要查询其帮助的时候&#xff0c;一般使用command -h或者man command来查询&#xff0c;但是&#xff0c;有时候仅仅想知道这个命令怎么用&#xff0c;并不想知道具体含义啊(这个命令可能不常用&#xff0c;没有必要仔细阅读手册)&…

Nature重大突破!将皮肤细胞直接转化成感光细胞让小鼠重见光明!

图片来源&#xff1a;https://cn.bing.com本文系生物谷原创编译&#xff0c;欢迎分享&#xff0c;转载须授权&#xff01;研究人员发现了一种直接将皮肤细胞重新编程成用于视觉的光敏杆状感光器的技术。实验室制造的杆状体使失明的老鼠能够在细胞移植到眼睛后探测到光线。这项研…

时间组件选择一个时间段_衡南(光伏支架组件安装)施工队

衡南(光伏支架组件安装)施工队光伏支架安装本行业的技术人员应该了解&#xff0c;本发明不受上述实施例的限制&#xff0c;上述实施例和说明书中描述的只是说明本发明的原理&#xff0c;在不脱离本发明精神和范围的前提下&#xff0c;本发明还会有各种变化和改进&#xff0c;安…

保留小数点后两位小数

toFixed() 转载于:https://www.cnblogs.com/ytg1120/p/7101317.html

DNA存储,拯救人类数据危机的良方?

来源&#xff1a;脑极体开一个脑洞&#xff1a;如果地球正在面临一场马上到来的毁灭性星际灾害&#xff0c;人类又想尽可能地保存地球的生命和文明&#xff0c;在现有条件下&#xff0c;该怎么办&#xff1f;像大刘一样让地球停止自转然后逃离太阳系&#xff0c;这恐怕来不及了…

oracle数据库dblink创建语句_「运维实验」——达梦数据库DBlink连接Oracle配置

经过昨天达梦数据库间DBlink配置&#xff08;具体操作可回看上一篇文章&#xff09;&#xff0c;今天做延伸实验。实验环境说明Oracle数据库1&#xff1a;192.168.80.40 ora11g RHEL 6.5 64位达梦数据库1&#xff1a;192.168.80.41 DMSERVER2 RHEL 6.5 64位oracle数据库版本&am…

JS相似属性区别

1、prop与attr区别在浏览器中&#xff0c;有的要写成disabled disabled&#xff0c;checked"checked",有的只要写disabled就可以了&#xff0c;比如用attr("checked")获取checkbox的checked属性时&#xff0c;选中的时候可以取到值&#xff0c;值为checked…

智能经济的动力,从人工智能到超级智能

作者&#xff1a;刘锋前言&#xff1a;本文是根据研讨会发言形成的探讨性文章&#xff0c;主要阐述了智能经济的产生本质上是科技生态发生重大变化后的产物。提出智能经济运转的动力除了人工智能&#xff0c;人类的智能&#xff0c;互联网大脑模型的超级智能也是新出现的要素。…

损失函数_SRGAN损失函数(目标函数)详解

概要SRGAN的特点之一就是引进了损失感知函数&#xff0c;由此提升了超分辨率之后的细节信息。本文主要像您介绍SRGAN使用的损失函数&#xff0c;及其Keras实现。损失函数公式这是原文中给出的损失函数。容易看出&#xff0c;此损失函数包括两部分&#xff0c;第一部分是感知损失…

PHP获取本月起始和终止时间戳

一、本月起始和结束 //获取本月开始的时间戳 $beginThismonthmktime(0,0,0,date(m),1,date(Y)); //获取本月结束的时间戳 $endThismonthmktime(23,59,59,date(m),date(t),date(Y)); View Code二、上月起始和结束 写法一&#xff1a; $m date(Y-m-d, mktime(0,0,0,date(m)-1,1,…

人工智能细分领域龙头企业排行榜单

来源&#xff1a;互联网周刊2020年3月4日&#xff0c;中共中央政治局常务委员会召开会议&#xff0c;提出要发力于科技端的基础设施建设&#xff0c;人工智能成为“新基建”七大版块中的重要一项。“新基建”不同于传统思路&#xff0c;其本质是信息数字化的基础设施建设&#…

adnroid string拼接_Android开发中string.xml文件中字符串的拼接

第一种方法&#xff1a;在string.xml中进行操作MyStringDemo我今年%1d岁了&#xff0c;上%s年级&#xff01;我今年%1$3d岁了&#xff0c;上%2$9s年级&#xff01;在代码中使用的地方只需要调用String类的format方法&#xff1a;mTextView (TextView) findViewById(R.id.text_…

基于原版Hadoop的YDB部署(转)

YDB依赖环境准备 一、硬件环境 硬件如何搭配&#xff0c;能做到比较高的性价比&#xff0c;不存在短板。合理的硬件搭配&#xff0c;对系统的稳定性也很关键。 1.CPU不是核数越高越好&#xff0c;性价比才是关键。 经常遇到很多的企业级客户&#xff0c;他们机器配置非常高&…