Vue 计算属性和侦听属性
计算属性
在模板内可以使用表达式，但是如果在模板中放入太多的逻辑会让模板变的复杂且难以维护。
为此，Vue 提供了 计算属性。对于大部分复杂逻辑，都应该使用 计算属性。
简单示例
计算属性的简单示例：
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>example</title>
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8
9<body>
10 <div id="example">
11 <p>Original message: "{{ message }}"</p>
12 <p>Computed reversed message: "{{ reversedMessage }}"</p>
13 </div>
14
15</body>
16<script>
17 var vm = new Vue({
18 el: '#example',
19 data: {
20 message: 'Hello'
21 },
22 // 计算属性在 `computed` 的对象中声明
23 computed: {
24 // 声明计算属性并指定一个函数
25 reversedMessage: function () {
26 // `this` 指向 vm 实例
27 return this.message.split('').reverse().join('')
28 }
29 }
30 })
31</script>
32
33</html>
该示例声明了一个计算属性：reversedMessage，并为该属性指定了一个函数。该函数将用作该属性的 getter 函数，当通过 vm.reversedMessage 访问该属性时，调用的就是这个 getter 函数。
另外，这个vm.reversedMessage 依赖于 vm.message，当 vm.message 发生变化时，模板中所有依赖 vm.reversedMessage 的绑定也会随之更新。
计算属性 vs 方法
上面的示例，通过在表达式中调用方法也可以达到相同的效果。
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>example</title>
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8
9<body>
10 <div id="example">
11 <p>Original message: "{{ message }}"</p>
12 <p>Computed reversed message: "{{ reversedMessage() }}"</p>
13 </div>
14
15</body>
16<script>
17 var vm = new Vue({
18 el: '#example',
19 data: {
20 message: 'Hello'
21 },
22 methods: {
23 reversedMessage: function () {
24 return this.message.split('').reverse().join('')
25 }
26 }
27 })
28</script>
29
30</html>
二者的效果虽然相同，但是计算属性是基于响应式依赖进行缓存的。只有相关响应式依赖发生改变时，计算属性才会重新求值。
对于非响应式依赖，计算属性将不再更新。比如：
1computed: {
2 now: function () {
3 return Date.now()
4 }
5}
该示例中，Date.now() 不是响应式依赖，now 一旦被赋值，将不会再更新。
计算属性 vs 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。如下面的例子：
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>demo</title>
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8
9<body>
10 <div id="demo">{{ fullName }}</div>
11
12</body>
13<script>
14 var vm = new Vue({
15 el: '#demo',
16 data: {
17 firstName: 'Foo',
18 lastName: 'Bar',
19 fullName: 'Foo Bar'
20 },
21 watch: {
22 firstName: function (val) {
23 this.fullName = val + ' ' + this.lastName
24 },
25 lastName: function (val) {
26 this.fullName = this.firstName + ' ' + val
27 }
28 }
29 })
30</script>
31
32</html>
上面的方式比较繁琐，改成计算属性版本会好很多：
1var 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：
1// ...
2computed: {
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// ...
侦听器
计算属性适用于大多数情况，但有时也需要定义一个侦听器。
示例：
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>watch example</title>
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8
9<body>
10 <div id="watch-example">
11 <p>
12 Ask a yes/no question:
13 <input v-model="question">
14 </p>
15 <p>{{ answer }}</p>
16 </div>
17
18</body>
19<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
20<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
21<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
22<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
23<script>
24 var watchExampleVM = new Vue({
25 el: '#watch-example',
26 data: {
27 question: '',
28 answer: 'I cannot give you an answer until you ask a question!'
29 },
30 watch: {
31 // 如果 `question` 发生改变，这个函数就会运行
32 question: function (newQuestion, oldQuestion) {
33 this.answer = 'Waiting for you to stop typing...'
34 this.debouncedGetAnswer()
35 }
36 },
37 created: function () {
38 // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
39 // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
40 // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
41 // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
42 // 请参考：https://lodash.com/docs#debounce
43 this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
44 },
45 methods: {
46 getAnswer: function () {
47 if (this.question.indexOf('?') === -1) {
48 this.answer = 'Questions usually contain a question mark. ;-)'
49 return
50 }
51 this.answer = 'Thinking...'
52 var vm = this
53 axios.get('https://yesno.wtf/api')
54 .then(function (response) {
55 vm.answer = _.capitalize(response.data.answer)
56 })
57 .catch(function (error) {
58 vm.answer = 'Error! Could not reach the API. ' + error
59 })
60 }
61 }
62 })
63</script>
64
65</html>
在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
除了 watch 选项之外，还可以使用命令式的 vm.$watch API。