computed计算方法不被调用的原因;只有在使用时才会被调用

目录

一、问题

二、解决方法

三、总结


一、问题

1.需求:根据组件外部一个变量的值来确定 组件内部的操作。组件外部可以更改filetime的值,filetime有值时这个界面可以操作,否则不可以操作。

我一想 用computed就可以了呀,动态计算一下filetime不就可以了。于是写了下面的代码。然而我发现: 外面的filetime变了,computed函数竟然不执行!!!

还以为写错了,又加了一个watch,打印看到filetime确实变化了,那么computed为什么不执行呢?

1)代码如下:


2)结果:filetime变了,computed里面没有执行

二、解决方法

1.看了半天,不知道原因。不是说 computed就是:根据响应式数据来动态把数据处理成想要的值吗?patientInfo是响应式的,也变化了,怎么就不执行computed呢?

决定把patientInfo_filetime在页面上显示一下,看看到底有没有变化。

1)代码



2)结果:太神奇了,patientInfo_filetime确实变化了,computed函数竟然也执行了!!!

    真是不可思议!!!

computed计算方法不被调用的原因;只有在使用时才会被调用_第1张图片

2.经测试发现:computed是不会主动触发的,即使computed依赖的响应式数据变化了。

只有在中或 函数中 使用 computed属性,computed属性的计算方法才会执行。

如果你不使用计算属性,即使真的变化了,也不会计算!!!

3.解决方法

 1)watch监听到filetime时进行逻辑处理

    2)用computed不可行,因为我外部filetime的变化,并不会触发这个页面的函数,我不能在函数中使用computed属性;在页面的template中也确实不需要使用 computed计算出来的属性 

三、总结

1.computed方法不被调用的原因:

  1)computed计算方法写的有问题:检查一下代码是否正确

  2)watch监听一下,如果有变化;但是computed没有执行,则很有可能是  没有使用computed计算属性。

2.watch和computed

  1)发现他们的一个区别是:watch监听到变化就执行computed只有在你使用 computed计算属性时computed方法才会被调用。要根据不同场景判断到底要使用哪个!!!

 2)一般在 中有用到computed计算属性时,才使用computed;其余情况使用watch监听。

/*

希望对你有帮助!

如有错误,欢迎指正,非常感谢!

*/

你可能感兴趣的:(前端,笔记,javascript,前端,vue.js)