Loading [MathJax]/jax/input/TeX/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >created()或computed属性中的vuejs初始化数据函数(方法)

问created()或computed属性中的vuejs初始化数据函数(方法)
EN

Stack Overflow用户

提问于 2020-06-02 06:29:37

回答 1查看 313关注 0票数 1

我正在制作一个简单的表格，并开始思考哪种方式更好或更准确地书写。我知道使用创建的钩子会更好，但是..我只是想知道你们怎么想的。

我们必须显示实时数据(更新周期为1秒)，但它是非常可变的。因此，我在计算属性中调用了一个initData()函数，但我的前辈使用了created()钩子。

me: 1.方法：{ initData() {axios.get().then() }} 2.在计算属性中调用它(因为它每秒更新一次)：

getInitData() { this.initData() return this.data}

我的前辈: 1.方法:相同2.在创建的钩子中调用它(因为它是初始化的)：created() {this.initData()} 3.在计算属性中返回它(因为它每秒都会更新)：

 getInitData() { return this.data}

所以..。您认为这两种情况之间的性能差异是什么？

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-02 06:40:03

如果您在computed中进行反应性属性更改，将会创建一个无限循环

更改this.data ->计算属性recalculated -->更改this.data

在computed中，反应式数据被缓存，并在发生更改时触发DOM更改。现在想象一下这样的情况:一旦你收到接口响应，你改变了一个this.data，一旦this.data得到改变，它就会触发计算属性，你将再次创建一个网络请求，并再次改变this.data和computed属性。它将创建一个infinite循环

而在created钩子中，它的行为就像一个简单的方法，只有当你的component被创建时才会触发，这意味着你将第一次获得你的数据并改变this.data。在重新创建组件之前，它在任何情况下都不会再次触发

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62146098

复制

相关文章

vuejs中的模板/普通方法/计算属性computed与监听属性watch四者的比较

缓存编程算法 vue.js

在vue中,实现同一个功能需求,可以使用普通方法,也可以使用computed属性以及watch属性,对于它们的使用,刚开始时,存在着一些困惑

itclanCoder

2022/01/25

2K0

vuejs中的模板/普通方法/计算属性computed与监听属性watch四者的比较

computed计算属性值是函数的监控的数据

http 缓存其他

computed 页面重新渲染时，不会重复计算，而 watch 会重新计算，所以 computed 性能更高些。

用户7365393

2021/10/06

9610

vue中computed计算属性传入参数

javascript 闭包

做一个简单的功能，使用计算属性判断传入的字符超过了20就去掉后面的字符在尾部添加。。。

acoolgiser

2019/04/17

2.7K0

Vue 的计算属性 computed

return this.message.split('').reverse().join('')

wust小吴

2019/12/27

8250

VueJs中customRef函数的使用

ref是Vue官方提供的componsition API,将一个非响应式数据转变为响应式数据的函数,至于底层怎么实现数据的收集与响应式

itclanCoder

2023/02/26

1K0

VueJs中customRef函数的使用

Vuejs 计算属性

javascript html

计算属性 (computed) 处理元数据，便于进行二次利用。（比如：消费税自动计算功能）

hedeqiang

2019/12/17

1.4K0

Vue实战—菜单栏商品展示数据交互（8）

api https 网络安全

之前我们说过在created钩子，mounted钩子内可以发起请求，请求需要的数据。本次我们在created钩子内发起get请求，获取数据：

前端大彬哥

2019/07/22

9970

Vue实战—菜单栏商品展示数据交互（8）

vue中created、mounted等方法整理

computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值

用户2323866

2021/06/24

5810

Vue专题 02_计算属性(computed) VS 方法(methods)

缓存 vue.js html

两种方式的最终结果都是完全相同的（这里解释一下为什么会相同：当计算属性所依赖的数据发生改变时，计算属性会重新调用；当data中的任何一个数据发生变化时，Vue的模板都会重新解析一遍（Vue都会拿过来模板整体再阅读一遍），所以方法也被调用了一次）

用户9999906

2022/09/26

3950

【vue学习】 computed、watch属性

【vue学习】 computed和watch computed 计算属性一些常用的函数，可以缓存起来，在调用时直接使用缓存中的过程(结果)，以此来提高效率。注意：computed里虽然存放的是函数，但是在调用时，computed里的东西是一个属性。代码: <body> <div id="app"> {{getCurrentTime()}} <br> {{getCurrentTime1}} </div> <sc

Swingz

2020/12/18

3540

Vuejs --04 计算属性

一、使用原因 1、模板中表达式很便利，但实际上只适用于简单的运算，不适宜放入太多逻辑运算，例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 所以：任何复杂逻辑，你都应当使用计算属性二、使用方法 <div id="app"> 你好{{ ComMessage }} <p>{{ ComMsg() }}</p> </div> var vm = new Vue({

用户1148399

2018/01/09

8650

Vue（5）计算属性computed

缓存 http java https 网络安全

一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性。比如以下：

全栈程序员站长

2022/09/19

8130

vue之计算属性的缓存computed的使用

计算属性的缓存 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

兮动人

2021/06/11

6250

vue之计算属性的缓存computed的使用

【vue面试题】计算属性computed和方法methods的区别？

由于有以上的这些区别，因此计算属性通常是根据已有数据得到其他数据，并在得到数据的过程中最好不要使用异步、当前时间、随机数等操作，因为计算属性只执行一次就被放到缓存里面了,之后拿到的数据都是缓存

程序员法医

2022/08/11

3730

【vue面试题】计算属性computed和方法methods的区别？

WEB前端零基础课-1022本周总结

通读了3遍vuex官方文档，结合例子，算是整得七七八八了，还看了官方在GitHub上提供的例子源码

web前端教室

2018/11/22

7660

Dart 中的类的定义、构造函数、私有属性和方法、set与get、初始化列表

dart 编程算法

Dart是一门使用类和单继承的面向对象语言，所有的对象都是类的实例，并且所有的类都是Object的子类。

越陌度阡

2020/12/08

6.5K0

vue.js中的computed计算属性如何传递参数

javascript 闭包博客

笔者参考博客https://blog.csdn.net/qq_35775675/article/details/82288571的做法后，的确成功了。

acoolgiser

2019/04/17

10K0

vue之computed计算属性的基本使用

案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{getFullName()}}</h2> <h2>{{fullN

兮动人

2021/06/11

5490

vue之computed计算属性的基本使用

vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础

mvc vue.js javascript 编程算法

MVX模式简介： MVX框架模式：MVC+MVP+MVVM MVC: Model模型+View视图+Controller控制器

达达前端

2019/12/13

4.1K0

vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础

vue学习六计算属性Computed的详解

看下面例子，不难看懂，我们给按钮事件让其能让a的值或b的值自增1，然后addToA方法和addToB方法就是将age的值和a相加。这时候就有一个问题，当我们直接在浏览器刷新的时候，我们事先写好的输出直接就显示出来了，而且是A和B都输出了，看console中的结果。而当我们点击一次“Add to A”时，A的值增加1，而两个方法又一次同时执行了一遍，就分别有了两遍的输出，这就很消耗内存空间资源了。。。所以计算属性就是解决这个问题的

meihuasheng

2021/03/16

6790

相似问题

Vuejs动态输入绑定& computed不是函数

244

vuejs orderby属性值在computed中返回9项

12

VueJS - Computed属性没有setter (但实际上有)

19

vuejs - computed无法与属性一起使用

10

带有对象双向数据绑定的Vuejs Computed Setter

114

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例