计算属性与侦听属性区别

计算属性与侦听属性区别

计算属性 compute

设计初衷

为了解决模板内的复杂表达式书写引起的代码混乱问题

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

上述是一个输出 message 反转后的结果，如果直接写在 HTML 模板上，一两个这样的复杂表达式还可以接受，有很多的话代码看上去就会变得非常乱。

<div 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('')
    }
  }
})

特性

1. 能够修改或整合处理一个或多个数据成一个新的数据

2. 计算属性自带了监听引用数据的变化的功能，当引用数据发生变化时，计算属性的数据也会跟着变化（热更新）

帧听属性 watch

侦听器也能通过手动监听数据的变化来返回一个新的数据

var vm = new Vue({
   
  el: '#demo',
  data: {
   
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
   
    firstName: function (val