共计 1896 个字符，预计需要花费 5 分钟才能阅读完成。
计算属性
什么是计算属性呢，顾名思义就是计算后的属性，来看一段代码
<div id=”app”>
{{firstName + ‘ ‘ + lastName}} // 这里展示出来的就是计算属性
</div>
let vm = new Vue({
el:’#app’,
data:{
firstName: ‘Dell’,
lastName: ‘Lee’
}
})
从这里可以发现，计算属性是有一些逻辑在里面的，但是我们不想在模版中写复杂的逻辑，模版中只做简单的展示，我们能不能再模版中只做一个简单的展示 {{fullName}}
computed
<div id=”app”>
{{fullName}}
</div>
let vm = new Vue({
el:’#app’,
data:{
firstName: ‘Dell’,
lastName: ‘Lee’
},
// 计算属性
computed:{
fullName(){
return this.firstName + ‘ ‘ + this.lastName
}
}
})
通过 computed 方法来写计算属性，fullName 最后的值完全是通过 firstName 和 lastName 计算得来的。
计算属性有个非常重要的知识点，它是内置缓存的，怎么体现这点呢？
<div id=”app”>
{{fullName}}
{{age}}
</div>
let vm = new Vue({
el:’#app’,
data:{
firstName: ‘Dell’,
lastName: ‘Lee’,
age:28
},
// 计算属性
computed:{
fullName(){
console.log(‘ 计算了一次 ’) // 更新 age 时，这句话不执行，只有更新 fullName 依赖的值时，这句话才会被执行
return this.firstName + ‘ ‘ + this.lastName
}
}
})
当我更新 age 时，console.log(‘ 计算了一次 ’) 没有被执行，而当我更新 fullName 依赖的值 firstName 或者 lastName 时，这句话才会被执行。
除了使用计算属性来计算值以外，还可以用一个方法来实现 methods
methods
<div id=”app”>
{{fullName()}} // 这里调用方法需要加上括号
{{age}}
</div>
let vm = new Vue({
el:’#app’,
data:{
firstName: ‘Dell’,
lastName: ‘Lee’,
age:28
},
// 方法
methods: {
fullName(){
console.log(‘ 计算了一次 ’) // 不管什么数据改变都会执行
return this.firstName + ‘ ‘ + this.lastName
}
}
})
用这种方法写代码，其实是不如计算属性来的有效的，因为数据只要发生变化，console.log 就会被执行，它内部没有缓存机制。
同样一个功能，用计算属性 computed 可以实现，用方法 methods 也可以实现，哪一种方式更好一些能，很显然是用计算属性更好些，因为它有缓存，性能更高
除了用计算属性、方法之外，还有没其他方法可以实现的，
watch
<div id=”app”>
{{fullName}}
{{age}}
</div>
let vm = new Vue({
el:’#app’,
data:{
firstName: ‘Dell’,
lastName: ‘Lee’,
fullName: ‘Dell Lee’
age:28
},
// 方法
watch:{
firstName(){
console.log(‘firstName 改变了，计算一次 ’) // 更新 age 时，这句话不执行，只有更新 fullName 依赖的值 firstName，这句话才会被执行
this.fullName = this.firstName + ‘ ‘ + this.lastName
},
lastName(){
console.log(‘lastName 改变了，计算一次 ’) // 更新 age 时，这句话不执行，只有更新 fullName 依赖的值 lastName，这句话才会被执行
this.fullName = this.firstName + ‘ ‘ + this.lastName
}
}
})
使用 watch 监听 fullName 的依赖值，当不是 fullName 依赖的内容改变时，console.log 不会执行，只有当 fullName 依赖的内容发生改变时，console.log 才会被执行。
虽然 watch 也能实现数据缓存，性能也不错，但相比 computed 来说，复杂了很多，所以如果一个功能既可以通过 computed 实现，methods 实现，watch 实现，优先推荐 computed 来实现，因为用这种方法写代码，既简洁，性能又不错。计算属性，方法，监听器
