vue基础——计算属性和侦听器

Posted 2020-11-20 zhanzhuang

计算属性——介绍

模板内的表达式非常便利，但是设计他们的初衷是用于简单计算的。在模板中放入太多的逻辑会让模板太过沉重切难以维护。如下：

1 <div id="example">
2   {{ message.split(‘‘).reverse().join(‘‘) }}
3 </div>

上面的例子中，模板不是简单的声明式逻辑。必须要看一段时间才看意识到，这里面是想要显示message的反转字符串。想要在模板中多次引用此处的反转字符串时，就会更加难以处理。

所以对于复杂的逻辑要使用计算属性。

计算属性——基础例子

这里我们声明了一个计算属性reversedMessage。我们提供的函数将用作属性vm.reversedMessage的getter函数：

html

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

js

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

结果：

---

 

打开浏览器的控制台，自行修改例子的vm。vm.reversedMessage的值取决于vm.message的值

js

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

我们可以像绑定普通属性一样在模板中绑定计算属性。Vue知道vm.revsersedMessage依赖于vm.message，因此当vm.message发生变化时，所有依赖vm.reversedMessage的绑定也会更新。而且最奇妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的getter函数是没有副作用的，这使它更易于测试和理解。

计算属性——计算属性VS缓存方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

html

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

js

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

我们可以将同一个函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于他们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也意味着下面的计算属性将不再更新，因为Data.now()不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法总会重新再次执行函数。

我们为什么要使用缓存？假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并作大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行A的getter！如果你不希望有缓存，请用方法来替代。

计算属性——计算属性VS侦听属性

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。

当你有一些数据要随着其他数据变动而变动时，你很容易滥用watch——特别是如果你之前使用过angularJS。

然而，通常更好的做法是使用计算属性而不是命令式的watch回调。细想一下下面的例子：

html

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

js

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
    }
  }
})

好多了，不是吗？？？？？？，没看出来好在哪儿，卧槽

计算属性——计算属性的setter

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

js

// ...
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也会相应的地被更新。

侦听器

无~~~~~~~~~