当前位置: 首页 > Web前端 > vue.js

什么是vue中的watch和computed,vue中的computed

时间:2023-04-01 00:50:12 vue.js

,computedvue中的computed?首先,我们明确一个computed的基本定义。Computed用于监控我们自己定义的变量。它不在数据中声明(如普通变量),而是直接在计算中定义。那么vue中的watch和computed都是在vue中,它们的任务都是基于依赖跟踪机制:当某个数据(我们设置监控的依赖数据)发生变化时,所有依赖于这个数据的数据都会相应自动发生变化。这是watch和Computedtasks,也是它们和methods的区别,因为methods是用来定义函数的,需要手动调用importVuefrom'vue'newVue({el:'#root',template:`

姓名:{{name}}

姓名:{{getName()}}

编号:{{number}}

名字:

LaseName:

`,data:{firstName:'Jokcy',lastName:'Lou',number:0},computed:{name(){console.log('newname')return`${this.firstName}${this.lastName}`}},方法:{getName(){console.log('getNameinvoked')return`${this.firstName}${this.lastName}`}}})当我们改变数字的时候,整个应用会被重新渲染,vue会re-renderedbythedata此时在dom中,如果我们使用getName方法,该方法会随着渲染一起被调用,computed不会重新计算,所以性能开销比较小。当新值需要大量计算才能得到时,缓存的意义就非常大了。如果computed所依赖的数据发生变化,则computed属性会被重新计算并缓存;当其他数据改变时,计算属性不会重新计算,从而提高性能。当我们得到的值需要被处理和使用时,我们可以使用computed。watch和computedwatch的区别是监控某个数据的变量,监控之后倾向于调用哪个函数,一个数据影响其他多个函数的调用,而computed倾向于计算后返回一个数据,data不影响不需要声明你想要的computed的监控值,但是你必须声明你想要看的东西,我们大多数人使用computed来处理在使用watch和methods时无法处理的数据