Vue进阶必备，从源头深度掌握计算属性、方法与侦听器

1 计算属性

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

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

此处模板不再是简单声明式逻辑。看段时间才能意识到，是想显示变量 message 的翻转字符串。当你在模板的多处包含此翻转字符串时，就会更难处理。

所以，任何复杂逻辑，应使用计算属性。

1.1 案例

 <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。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：

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

自行修改 vm。vm.reversedMessage 值始终取决于 vm.message 值。

可像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也更新。

我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用，易测试和理解。

1.2 计算属性缓存 V.S 方法

可通过在表达式中调用方法来达到同样的效果：

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

可将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。即只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

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

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

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

验证有缓存

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>计算属性，方法，侦听器</title>
   <script src="../vue.js"></script>
 </head>
 <body>
   <div id="app">
     {{fullName}}
     {{age}}
   </div>
 
   <script>
     var vm = new Vue({
       el: "#app",
       data: {
         firstName: "Java",
         lastName: "Edge",
         fullName: "Java Edge",
         age: 18
       },
       // watch: {
       //  firstName: function() {
       //    console.log("计算了一次");
       //    this.fullName = this.firstName + " " + this.lastName;
       //  },
       //  lastName: function() {
       //    console.log("计算了一次");
       //    this.fullName = this.firstName + " " + this.lastName;
       //  }
       // }
       // 方法
       // methods: {
       //  fullName: function() {
       //    console.log("计算了一次");
       //    return this.firstName + " " + this.lastName;
       //  }
       // },
       // 计算属性
       computed: {
         fullName: function() {
           console.log("计算了一次");
           return this.firstName + " " + this.lastName
         }
       }
     })
   </script>
 </body>
 </html>

console.log("计算了一次");通过该代码即可验证有缓存。

为什么需要缓存？

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

没有缓存机制的 methods

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>计算属性，方法，侦听器</title>
   <script src="../vue.js"></script>
 </head>
 <body>
   <div id="app">
     {{fullName()}}
     {{age}}
   </div>
 
   <script>
     var vm = new Vue({
       el: "#app",
       data: {
         firstName: "Java",
         lastName: "Edge",
         // fullName: "Java Edge",
         age: 18
       },
       // 方法
       methods: {
         fullName: function() {
           console.log("计算了一次");
           return this.firstName + " " + this.lastName;
         }
       },
     })
   </script>
 </body>
 </html>

我改变的是 age，但是页面只要被重新渲染了，就会重新执行方法。

所以，都能使用时，请多使用计算属性。

1.3 计算属性 vs 侦听属性

Vue 提供更通用的方式来观察和响应 Vue 实例的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，易滥用 watch。

更好的做法是使用计算属性而非命令式的 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
     }
   }
 })

好多了吧。因此，watch 和计算属性，还是更推荐计算属性。

1.4 计算属性的 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 也会相应地被更新。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>计算属性的setter和getter</title>
     <script src="../vue.js"></script>
 </head>
 <body>
 <div id="app">
     {{fullName}}
 </div>
 
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             firstName: "Java",
             lastName: "Edge"
         },
         computed: {
             fullName: {
                 get: function () {
                     return this.firstName + " " + this.lastName
                 },
                 set: function (value) {
                     console.log(value)
                     var arr = value.split(" ");
                     this.firstName = arr[0];
                     this.lastName = arr[1];
                 }
             }
         }
     })
 </script>
 </body>
 </html>

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。 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, oldQuestion) {
       this.answer = 'Waiting for you to stop typing...'
       this.debouncedGetAnswer()
     }
   },
   created: function () {
     // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
     // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
     // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
     // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
     // 请参考：https://lodash.com/docs#debounce
     this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
   },
   methods: {
     getAnswer: 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
         })
     }
   }
 })
 </script>