前言

vue中的computed和watch我们经常会用到,那么在什么场景下使用computed和watch,两者又有什么区别呢,傻傻分不清楚。记录一下,温故而知新!

computed

computed是计算属性,基于data中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值,这个新值只会根据已知值的变化而变化,换句话说,这个属性依赖其他属性,由其他属性计算而来的。

举个栗子

姓名:{{ fullName }}data: {firstName: 'David',lastName: 'Beckham'},computed: {fullName: function() { //方法的返回值作为属性值 return this.firstName + ' ' + this.lastName}} 

在 computed 属性对象中定义计算属性的方法,和取data对象里的数据属性一样以属性访问的形式调用,即在页面中使用 {{ }} 的方式来显示计算的结果。

注意点:计算属性 fullName 不能在 data 中定义,而计算属性值的相关已知值在data中, 如果 fullName 在 data 中定义了会报错

如果 computed 属性值是一个函数,那么默认会走 get 方法,必须要有一个返回值,函数的返回值就是属性的属性值。计算属性定义了 fullName 并返回对应的结果给这个变量,变量不可被重复定义和赋值。

computed缓存功能

在页面中多次显示 fullName

姓名:{{ fullName }}姓名:{{ fullName }}姓名:{{ fullName }}computed: {fullName: function () { console.log('computed') // 只打印一次 return this.firstName + ' ' + this.lastName}} 
  • computed 内定义的 function 只会执行一次,当初始化显示或者相关的 data、props 等属性数据发生变化的时候才会调用* 只有当 computed 属性被使用后,才会执行 computed 的代码,只要依赖数据不变,直接取缓存中的计算结果。只有依赖型数据发生改变,computed 才会重新计算。计算属性的高级

在computed 中的属性都有一个 get 和一个 set 方法,当数据变化时,调用 set 方法。通过计算属性的 getter/setter 方法来实现对属性数据的显示和监视,即双向绑定。

computed: {fullName: {get() { // 读取当前属性值的回调,根据相关的数据计算并返回当前属性的值return this.firstName + ' ' + this.lastName},set(val) { // 当属性值发生改变时回调,更新相关的属性数据 const names = val ? val.split(' ') : []; this.firstName = names[0] this.lastName = names[1]}}} 

watch

通过 vm 对象的 $watch() 或 watch 配置来监听 Vue 实例上的属性变化,或某些特定数据的变化,然后执行某些具体的业务逻辑操作。当属性变化时,回调函数自动调用,在函数内部进行计算。它可以监听data,props,computed 内的数据。

举个栗子

watch: {firstName: function(val) { this.fullName = val + ' ' + this.lastName},lastName: function(val) {this.fullName = this.firstName + ' ' + val}} 

注意点: 监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值,顺序一定是新值,旧值,如果只写一个参数,就是最新属性值。

对于复杂数据类型需要用到深度监听 deep。

举个栗子

data: {fullName: {firstName: 'David',lastName: 'Beckham'}},watch: {fullName: {handler(newVal, oldVal) {console.log(newVal);console.log(oldVal);},deep: true}} 

如果要监听对象的单个属性的变化,有两种方法

  • 直接监听对象的属性
watch:{fullName.firstName: function(newVal,oldVal){console.log(newVal,oldVal);}} 
  • 与 computed 属性配合使用,computed 返回想要监听的属性值,watch 用来监听
computed: {firstNameChange() {return this.fullName.firstName}},watch: {firstNameChange() {console.log(this.fullName)}} 

总结

watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动。

当依赖的值变化时,在watch中,可以做一些复杂的操作,而computed中的依赖,仅仅是一个值依赖于另一个值,是值上的依赖。

使用场景

  • computed:用于处理复杂的逻辑运算;一个数据受一个或多个数据影响;用来处理watch和methods无法处理的,或处理起来不方便的情况。
  • watch:用来处理当一个属性发生变化时,需要执行某些具体的业务逻辑操作,或要在数据变化时执行异步或开销较大的操作;一个数据改变影响多个数据。

区别

computed

  • 初始化显示的属性数据发生变化的时候调用;
  • 计算属性不在 data 中,它是基于data 或 props 中的数据通过计算得到的一个新值,这个新值根据已知值的变化而变化;
  • 在 computed 属性对象中定义计算属性的方法,和取data对象里的数据属性一样,以属性访问的形式调用;
  • 如果 computed 属性值是函数,那么默认会走 get 方法,必须要有一个返回值,函数的返回值就是属性的属性值;
  • computed 属性值默认会缓存计算结果,在重复的调用中,只要依赖数据不变,直接取缓存中的计算结果,只有依赖型数据发生改变,computed 才会重新计算;
  • 在computed中的,属性都有一个 get 和一个 set 方法,当数据变化时,调用 set 方法。

watch

  • 主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看作是 computed 和 methods 的结合体;
  • 可以监听的数据来源:data,props,computed内的数据;
  • watch支持异步
  • 不支持缓存,监听的数据改变,直接会触发相应的操作;
  • 监听函数有两个参数,第一个是最新的值,第二个参数是输入之前的值,顺序是新值,旧值。

以上就是在Vue中computed和watch区别啦,希望对你有帮助。

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享