一、计算属性?什么东东??

不废话,先看代码:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

上面{{}} 内是可以写表达式的,但是一般会写一些简单的表达式。太复杂的话,可读性比较差,难以维护。
所以,vue提供了计算属性这个东西,即我们所说的computed
特点:计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算(这点详细作用可以对比文中第三点)

二、怎么用腻?

首先要知道计算属性里用来完成各种复杂逻辑(运算、函数调用等),只要最终返回一个结果即可。computed里有getter和setter,getter用来读取,当手动修改属性值时触发setter。
疑问
讲的啥,我也不明白。。。那我们看例子吧:

<div id="example">
   <p>{{ reversedMessage }}</p>
   <p>{{splitMessage}}</p>
</div>
var vm = new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    // 读取和设置
    splitMessage: {
      //getter用于读取
      get: function () {
        return this.message.split('').join('-')
      },
      //setter写入时触发
      //(什么时候会触发??当我们在代码中改变this.message值得时候,就会触发setter和getter,比如:执行this.message = 'world'时)
      set: function (newValue) {
        this.message = newValue
      }
    },
    // 仅读取(一般情况下,我们只会用默认的getter方法,所以可以简写如下)
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在此,只要会用默认getter,问题就不大。

三、对比methods

在表达式中调用methods中的方法,同样可以达到同样的效果:

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

那我们直接用methods就好了呗,vue为何还要创建computed呢?问得好!
因为methods这种方法,值是实时更新的,当页面组件刷新或者执行this.message = 'world'等等,反正只要重新渲染,函数就会重新被执行。
然鹅,computed只有在依赖的实例数据改变时,才会更新(即所说的缓存)。那即使重新渲染,只要this.message的值不发生变化,computed里面getter就不会重新执行。所以当处理大量数据的时候,使用计算属性,而不是方法,这样会提高性能。

四、对比watch

当this.message发生变化时候,触发setter、getter。好似监听、于是我们想到了watch。那他们的区别在哪呢?
例子:

<div id="myDiv">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>

computed:

//这里不用再data中声明fullName
new Vue({
    el:"#myDiv",
    data:{
        firstName:"Foo",
        lastName:"Bar",
    },
    computed:{
        fullName:function(){
            return  this.firstName  + " " +this.lastName;
        }
    }
})

watch:

new Vue({
  el: '#myDiv',
  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
    }
  }
})

从上面我们可以总结出:

  • computed是计算属性,是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化,然后执行相对应的函数,watch支持异步。
  • computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算。watch在每次监听的值变化时,都会执行回调。其实从这一点来看,都是在依赖的值变化之后,去执行回调。很多功能本来就很多属性都可以用,只不过有更适合的。如果一个值依赖多个属性(多对一),用computed肯定是更加方便的。如果一个值变化后会引起一系列操作,或者一个值变化会引起一系列值的变化(一对多),用watch更加方便一些。
  • watch的回调里面会传入监听属性的新旧值,通过这两个值可以做一些特定的操作。computed通常就是简单的计算。

说了这么多,其实我们可以简单理解为:

1、当我们想的值是实时更新的,我们用methods
2、当我们想要计算后的属性值,依赖于其他数据变化才更新,我们用computed
2、当依赖数据发生变化后,我们还要做其它的一些事情,我们用watch

That's all!

Logo

前往低代码交流专区

更多推荐