vue文档 —— 计算属性和观察者
vue 2017-09-22 15:38:10

计算属性

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

XML/HTML Code复制内容到剪贴板
  1. <div id="example">  
  2.   {{ message.split('').reverse().join('') }}  
  3. </div>  

 

在这个地方，模板不再简单和清晰。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

 

demo：

XML/HTML Code复制内容到剪贴板
  1. <div id="example">  
  2.   <p>Original message: "{{ message }}"</p>  
  3.   <p>Computed reversed message: "{{ reversedMessage }}"</p>  
  4. </div>  
  5. var vm = new Vue({  
  6.   el: '#example',  
  7.   data: {  
  8.     message: 'Hello'  
  9.   },  
  10.   computed: {  
  11.     // a computed getter  
  12.     reversedMessage: function () {  
  13.       // `this` points to the vm instance  
  14.       return this.message.split('').reverse().join('')  
  15.     }  
  16.   }  
  17. })  

结果：

Original message: "Hello"

Computed reversed message: "olleH"

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

JavaScript Code复制内容到剪贴板
  1. console.log(vm.reversedMessage) // => 'olleH'  
  2. vm.message = 'Goodbye'  
  3. console.log(vm.reversedMessage) // => 'eybdooG'  

 

计算属性的缓存VS方法

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

XML/HTML Code复制内容到剪贴板
  1. <p>Reversed message: "{{ reversedMessage() }}"</p>  

 

JavaScript Code复制内容到剪贴板
  1. // in component  
  2. methods: {  
  3.   reversedMessage: function () {  
  4.     return this.message.split('').reverse().join('')  
  5.   }  
  6. }  

 

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

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

JavaScript Code复制内容到剪贴板
  1. computed: {  
  2.   now: function () {  
  3.     return Date.now()  
  4.   }  
  5. }  

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

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

 

计算属性VS被观察的属性

Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。

XML/HTML Code复制内容到剪贴板
  1. <div id="demo">{{ fullName }}</div>  

 

JavaScript Code复制内容到剪贴板
  1. var vm = new Vue({  
  2.   el: '#demo',  
  3.   data: {  
  4.     firstName: 'Foo',  
  5.     lastName: 'Bar',  
  6.     fullName: 'Foo Bar'  
  7.   },  
  8.   watch: {  
  9.     firstName: function (val) {  
  10.       this.fullName = val + ' ' + this.lastName  
  11.     },  
  12.     lastName: function (val) {  
  13.       this.fullName = this.firstName + ' ' + val  
  14.     }  
  15.   }  
  16. })  

上面代码是命令式的和重复的。将它与计算属性的版本进行比较：

JavaScript Code复制内容到剪贴板
  1. var vm = new Vue({  
  2.   el: '#demo',  
  3.   data: {  
  4.     firstName: 'Foo',  
  5.     lastName: 'Bar'  
  6.   },  
  7.   computed: {  
  8.     fullName: function () {  
  9.       return this.firstName + ' ' + this.lastName  
  10.     }  
  11.   }  
  12. })  

好得多了，不是吗？

 

计算属性的setter

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

JavaScript Code复制内容到剪贴板
  1. // ...  
  2. computed: {  
  3.   fullName: {  
  4.     // getter  
  5.     get: function () {  
  6.       return this.firstName + ' ' + this.lastName  
  7.     },  
  8.     // setter  
  9.     set: function (newValue) {  
  10.       var names = newValue.split(' ')  
  11.       this.firstName = names[0]  
  12.       this.lastName = names[names.length - 1]  
  13.     }  
  14.   }  
  15. }  
  16. // ...  

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

 

观察者

 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher。这是为什么 Vue 通过 watch 选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

XML/HTML Code复制内容到剪贴板
  1. <div id="watch-example">  
  2.   <p>  
  3.     Ask a yes/no question:  
  4.     <input v-model="question">  
  5.   </p>  
  6.   <p>{{ answer }}</p>  
  7. </div>  

 

JavaScript Code复制内容到剪贴板
  1. <!-- Since there is already a rich ecosystem of ajax libraries    -->  
  2. <!-- and collections of general-purpose utility methods, Vue core -->  
  3. <!-- is able to remain small by not reinventing them. This also   -->  
  4. <!-- gives you the freedom to just use what you're familiar with. --> 
  5. <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> 
  6. <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> 
  7. <script> 
  8. var watchExampleVM = new Vue({ 
  9.   el: '#watch-example', 
  10.   data: { 
  11.     question: '', 
  12.     answer: 'I cannot give you an answer until you ask a question!' 
  13.   }, 
  14.   watch: { 
  15.     // 如果 question 发生改变，这个函数就会运行 
  16.     question: function (newQuestion) { 
  17.       this.answer = 'Waiting for you to stop typing...' 
  18.       this.getAnswer() 
  19.     } 
  20.   }, 
  21.   methods: { 
  22.     // _.debounce 是一个通过 lodash 限制操作频率的函数。 
  23.     // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率 
  24.     // ajax 请求直到用户输入完毕才会发出 
  25.     // 学习更多关于 _.debounce function (and its cousin 
  26.     // _.throttle)，参考：https://lodash.com/docs#debounce 
  27.     getAnswer: _.debounce( 
  28.       function () { 
  29.         if (this.question.indexOf('?') === -1) { 
  30.           this.answer = 'Questions usually contain a question mark. ;-)' 
  31.           return 
  32.         } 
  33.         this.answer = 'Thinking...' 
  34.         var vm = this 
  35.         axios.get('https://yesno.wtf/api')  
  36.           .then(function (response) {  
  37.             vm.answer = _.capitalize(response.data.answer)  
  38.           })  
  39.           .catch(function (error) {  
  40.             vm.answer = 'Error! Could not reach the API. ' + error  
  41.           })  
  42.       },  
  43.       // 这是我们为用户停止输入等待的毫秒数  
  44.       500  
  45.     )  
  46.   }  
  47. })  
  48. </script>  

 1.jpg

 

2.jpg3.jpg

 

 

4.jpg5.jpg

 

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

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

 

本文来自于：http://www.yoyo88.cn/study/vue/158.html

上一篇 vue文档 —— 模板语法整理
下一篇 vue文档 —— Class 与 Style 绑定
相关的文章
Powered by yoyo苏ICP备15045725号