watch和computed理解吗?

650 阅读3分钟

「这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战

在vue的项目中,我们时常需要对data的改变做出处理,这时候就需要用到watch和computed这两个属性,既然都是数值改变触发改变的属性,他们之间又有什么异同呢?分别要在哪些场景下使用呢?今天给大家简单说下我的理解,希望有所帮助。。。

Vue中的computed

computed 基础用法

computed 是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。

computed设计的初衷是为了使模板中的逻辑运算更简单, 比如在Vue模板中有很多复杂的数据计算的话, 我们可以把该计算逻辑放入到computed中去计算。

get用法
data: {
  firstName: 'Liu',
  lastName: 'lu'
},
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

fullName不可在data里面定义,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值

get和set用法
data: {
    firstName: 'Liu',
    lastName: 'lu'
  },
  computed: {
  fullName:{
   get(){//回调函数 当需要读取当前属性值时执行,根据相关数据计算并返回当前属性的值
      return this.firstName + ' ' + this.lastName
    },
   set(val){//监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据
       //val就是fullName的最新属性值
       console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }
  • computed内部的函数名称可以随意编写
  • computed内部的函数必须通过return的方式将结果进行返回,最好不要在内部进行赋值操作
  • 虽然computed内部是以函数的方式进行编写,但是在调用的时候并不是一个函数,所以不需要加()
  • 只要函数内部所依赖的属性发生了改变,那么这个函数就会自己调用
  • 如果函数内部所依赖的属性没有发生改变的时候computed会从缓存中读取结果

computed 应用场景

  1. 适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算, 然后会在computed中缓存起来, 下次就可以直接获取了。

  2. 如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为computed中。

Vue中的watch

watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。 Vue实列将会在实例化时调用$watch(), 他会遍历watch对象的每一个属性。

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

watch应用场景

当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。

watch 和 computed的区别

相同点:他们两者都是观察页面数据变化的。

不同点:computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据 watch每次都需要执行函数。watch更适用于数据变化时的异步操作。

computed 常用于值的计算,如简化tempalte里面{{}}计算和处理props或$emit的传值,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数。

watch常用来观察动作,听props$emit或本组件的值执行异步操作,页面重新渲染时值不变化也会执行。

computed 和 watch 的使用场景并不一样,computed 的话是通过几个数据的变化,来影响一个数据, 而 watch,则是可以一个数据的变化,去影响多个数据。