Vue官网教程学习笔记：computed计算属性

computed计算属性

computed是vue中的计算属性，用于计算视图中显示的属性，在dom结构加载之后计算，用过vue的小伙伴都知道，我们可以在模板内的表达式中直接进行运算，例如

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

可是，这种方法，只适合简单计算和重复率低的时候使用，所以，我们在复杂逻辑计算的时候，就应当使用计算属性

1.基础例子

<id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

运行结果：

Original message: “Hello”

Computed reversed message: “olleH”

2.计算属性缓存和方法的比较

<p>Reversed message: "{{ reversedMessage() }}"</p>

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

如上所示，我们使用定义方法来实现计算，取得的结果都是一样的，不同的是，计算属性是基于它的依赖进行缓存的。只有在相关依赖发生改变时，才会重新计算。这就意味着，只要依赖未发生改变，即使多次访问reversedMessage 也是返回的缓存中的值，而不必多次执行函数。

3.计算属性和侦听属性比较
当需要在数据变化时执行异步或开销较大的操作时，使用watch侦听器是最合适的，反之，使用计算属性的缓存属性可以更加有效。可以看下下面的例子。

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  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
    }
  }
})

上面代码是命令式且重复的。将它与计算属性的版本进行比较,明显简单多了。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

4.计算属性的setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

扫描二维码关注公众号，回复： 6241609 查看本文章

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

vue官网链接(https://cn.vuejs.org/v2/guide/computed.html)
有问题的小伙伴，可以在文章末留言哦，我看到的话，会及时回复哒。也可以加群282964014

Vue官网教程学习笔记：computed计算属性

computed计算属性

猜你喜欢