Vue教程：计算属性computed与侦听器watch（三）

计算属性computed

模板内的表达式很是便利，可是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护。例如：

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

因此，对于任何复杂逻辑，你都应当使用计算属性。

例子

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

结果：

Original message: "Hello" Computed reversed message: "olleH"

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

console.log(vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // => 'eybdooG'

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

计算属性缓存 vs 方法

你可能已经注意到咱们能够经过在表达式中调用方法来达到一样的效果：

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

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

咱们能够将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是彻底相同的。然而，不一样的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。

这也一样意味着下面的计算属性将再也不更新，由于 Date.now() 不是响应式依赖：

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

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变更：侦听属性。当你有一些数据须要随着其它数据变更而变更时，你很容易滥用 watch——特别是若是你以前使用过 AngularJS。然而，一般更好的作法是使用计算属性而不是命令式的 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 } } })

计算属性的 setter

计算属性默认只有 getter ，不过在须要时你也能够提供一个 setter ：

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

侦听器watch

虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。

<div id="watch-example">
  <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> </div>

<!-- 由于 AJAX 库和通用工具的生态已经至关丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可让你自由选择本身更熟悉的工具。 --> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> <script> var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 若是 `question` 发生改变，这个函数就会运行 question: function (newQuestion) { this.answer = 'Waiting for you to stop typing...' this.getAnswer() } }, methods: { // `_.debounce` 是一个经过 Lodash 限制操做频率的函数。 // 在这个例子中，咱们但愿限制访问 yesno.wtf/api 的频率 // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于 // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识， // 请参考：https://lodash.com/docs#debounce getAnswer: _.debounce( function () { if (this.question.indexOf('?') === -1) { this.answer = 'Questions usually contain a question mark. ;-)' return } this.answer = 'Thinking...' var vm = this axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) }, // 这是咱们为断定用户中止输入等待的毫秒数 500 ) } }) </script>

在这个示例中，使用 watch 选项容许咱们执行异步操做 (访问一个 API)，限制咱们执行该操做的频率，并在咱们获得最终结果前，设置中间状态。这些都是计算属性没法作到的。

除了 watch 选项以外，您还可使用命令式的 vm.$watch API。

vm.$watch( expOrFn, callback, [options] )

参数：

• {string | Function} expOrFn
• {Function | Object} callback

• {Object} [options]

  • {boolean} deep
  • {boolean} immediate

返回值：{Function} unwatch
用法：
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数获得的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，由于它们的引用指向同一个对象/数组。Vue 不会保留变异以前值的副本。

实例1：

// 键路径 vm.$watch('a.b.c', function (newVal, oldVal) { // 作点什么 })

再来一个函数的实例：
html代码：

<div id="app"> <input type="text" v-model="a" /> <input type="text" v-model="b" /> </div>

JS代码：

//函数 var vm = new Vue({ el: '#app', data: { a:'文本1', b:'文本2' }, }) vm.$watch( function () { return this.a + this.b }, function (newVal, oldVal) { console.log(newVal,oldVal); } )

vm.$watch 返回一个取消观察函数，用来中止触发回调：

var unwatch = vm.$watch('a', cb) // 以后取消观察 unwatch()

• 选项：deep

为了发现对象内部值的变化，能够在选项参数中指定 deep: true 。注意监听数组的变更不须要这么作。

vm.$watch('someObject', callback, {
  deep: true }) vm.someObject.nestedValue = 123 // callback is fired

• 选项：immediate

在选项参数中指定 immediate: true 将当即以表达式的当前值触发回调：

vm.$watch('a', callback, {
  immediate: true }) // 当即以 `a` 的当前值触发回调