Vue 官方文档2.x教程学习笔记
文章目录
- Vue 官方文档2.x教程学习笔记
- 1 基础
- 1.5 计算属性和侦听器
- 1.5.1 计算属性
1 基础
1.5 计算属性和侦听器
1.5.1 计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。
在模板中放入太多的逻辑会让模板过重且难以维护。
例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。
你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，都应当使用计算属性。
【基础栗子】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
//计算属性的getter
reversedMessage: function (){
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
浏览器效果
这里我们声明了一个计算属性 reversedMessage。
我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：
vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。
而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
【计算属性缓存 vs 方法】
上面的栗子，可以在表达式中调用方法来达到同样的效果：
浏览器效果
这里必须将计算属性注掉或者删掉，不然会出现已经存在的同名错误。
将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这就意味着下面的计算属性不会进行更新，因为
Date.now()不是响应式依赖computed: { now: function () { return Date.now() } }相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
【为什么需要缓存】
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
然后我们可能有其他的计算属性依赖于 A。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
【计算属性 vs 侦听属性】
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。
然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：
<div id="demo">
{{fullName}}
</div>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
fistName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
fistName: function (val){
this.fullName = val + ' ' + this.lastName
},
lastName: function (val){
this.fullName = this.fistName + ' ' + val
}
}
})
可以看到，侦听属性确实可以实现属性值变化时，进行跟随的变动。
但是和计算属性相比
<div id="demo">
{{fullName}}
</div>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
fistName: 'Foo',
lastName: 'Bar',
// fullName: 'Foo Bar'
},
computed:{
fullName: function (){
return this.fistName + ' ' + this.lastName
}
}
很明显，计算属性“获胜”。
【计算属性的setter】
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
var vm = new Vue({
el: '#demo',
data: {
fistName: 'Foo',
lastName: 'Bar',
// fullName: 'Foo Bar'
},
computed:{
fullName: {
//getter
get: function (){
return this.fistName + ' ' + this.lastName
},
//setter
set: function (newValue){
var names = newValue.split(' ')
this.fistName = names[0]
this.lastName = names[names.length - 1]
}
}
}
现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
![[附源码]计算机毕业设计二次元信息分享平台的设计及实现](https://img-blog.csdnimg.cn/a368dfa3bf2842058df943b87303bf0d.png)
