Vue 计算属性与侦听
计算属性
尽管vue内的表达式非常便利，但设计他们的初衷依然是用于进行简单的运算，如下方的code主要用于翻转字符串：
1
2
3
4
5
6
7
8
9
10
11
| <div id="app">
{{message.split('').reverse().join('')}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello,world'
}
})
</script>
|
但是如果我们想要在模板中多处翻转字符串的时候就会变得非常繁琐，所以对于复杂的处理我们一般使用computed属性，即```所有getter和setter上的this上下文都会被绑定在Vue的实例中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="app">
{{ reversedMessage }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello,world'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse('').join('')
}
}
})
</script>
|
在此时，我们首先声明了一个计算属性为reversedMessage，并提供了函数将作特征为 app.reversedMessage的getter函数，同样的我们也可以在控制台中通过使用app.message="vue"来进行修改。
通过计算属性，vue知道app.reversedMessage依赖或引用于app.message所以当app.message发生改变的时候，依赖他的数据自然会被更新。
计算属性和方法
在官方文档中该标题为 计算属性 vs 方法很显然虽然两者最后都会达到同样的效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="app">
{{ reversedMessage() }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello,world'
},
methods: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
})
</script>
|
但是不同的是计算属性是基于他的响应式依赖进行缓存的，当相关响应式以来发生改变的时候才会重新渲染，所以这就意味着只要````app.message没事不进行该ian，多次访问reversedMessage```并不会立即返回计算之前的效果或再次执行。
相比之下与每次访问都要重新进行寻安然，调用方法然后在再次执行函数的操作很明显前者较为优秀。
计算属性和侦听属性
vue为我们提供了一种更加通用的方式来观察响应vue实例上的数据变动即watch的侦听属性，当有一些数据需要随着其他数据进行变动的时候，可以使用watch属性：
watch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script>
var app = new Vue({
el: '#app',
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
}
}
})
</script>
|
computed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
computed: {
fullName: function () {
return this.firstName + '' + this.lastName
}
}
})
</script>
|
| ID |
DA |
| watch |
 |
| computed |
 |
通过上述的演示我们就可以非常轻松的了解到watch的作用，当很多数据需要随着其他数据改变而改变的时候，这个时候使用watch就非常的适当，而computed对于单个的数据较为有优势。
getter 与 setter
1
2
| getter 与 setter
getter 主要用于检索变量，而setter则用于更新变量的值
|
computed默认用于检索变量，如果想实现于watch差不多的作用那么我们可以增加一下setter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <div id="app">
{{ fullName }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
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]
}
}
}
})
</script>
|
侦听器
vue为开发者所提供了一种更加丝滑的API为watch，vue在实例化的同时调用watch，来遍历 watch对象内的所有属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <div id="app">
<input v-model="faq">
<p>{{answer}}</p>
</div>
<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 app = new Vue({
el: '#app',
data: {
faq: ' ',
answer: '请输入信息'
},
watch: {
faq: function(newQuestion, oldQuestion) {
this.answer = '正在输入……'
this.debouncedGetAnswer()
}
},
created: function() {
this.debouncedGetAnswer = _.debounce(this.getAnswer,500)
},
methods: {
getAnswer: function() {
if(this.faq.indexOf('?') === -1) {
this.answer = '输入的时候请加上一个问号'
return
}
this.answer = '正在检索'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function(response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function(error) {
vm.answer = 'API内并没有此数据' + error
})
}
}
})
</script>
|
