计算属性
为什么要是用计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
<div id="example">
{{ message.split('').reverse().join('') }}
</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要将变量 message 的值进行翻转。当你想要在模板中，多次使用此种方式翻转字符串的时候，就会变的更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
什么是计算属性
计算属性，就是用来声明式的描述一个值依赖了其它的值。
当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。
计算属性是有一定的缓存策略的，只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 依赖的值 还没有发生改变，多次访问 对应的计算属性，则计算属性会立即返回之前的计算结果，而不必再次执行函数。
实例演示
<template>
<div>
<h1>计算属性演示</h1>
{{ fullName }}
<br>
firstName: <input type="text" v-model="firstName">
<br>
lastName: <input type="text" v-model="lastName">
<br>
<button @click="testButton">测试</button>
</div>
</template>
<script>
export default {
data () {
return {
firstName: 'yulei',
lastName: 'lan'
}
},
computed: {
fullName () {
console.log('计算了一次')
return this.lastName + ' ' + this.firstName
}
},
methods: {
testButton () {
this.lastName = 'lan'
}
}
}
</script>setter
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter，也就是设置直接设置计算属性的值：
实例演示
<template>
<div>
<h1>计算属性演示</h1>
{{ fullName }}
<br>
<button @click="testButton">测试</button>
</div>
</template>
<script>
export default {
data () {
return {
firstName: 'yulei',
lastName: 'lan'
}
},
computed: {
fullName: {
get () {
console.log('计算了一次')
return this.lastName + ' ' + this.firstName
},
set (value) {
console.log(value)
var name = value.split(' ')
this.lastName = name[0]
this.firstName = name[1]
}
}
},
methods: {
testButton () {
this.fullName = 'lan lan'
}
}
}
</script>方法
我们定义一个方法，通过插值表达式去调用这个方法，那么则不管数据是否有变动则每次都会执行。
如果你不希望有缓存的情况出现的时候，可以使用方法代替计算属性。
<template>
<div>
{{ fullName() }}
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'yulei',
lastName: 'lan'
}
},
methods: {
fullName () {
return this.lastName + ' ' + this.firstName
}
}
}
</script>侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
同时侦听器和计算属性相同的是，也是具有一定的缓存特性。
实例演示：
<template>
<div>
{{ fullName }}
<br>
firstName: <input type="text" v-model="firstName">
<br>
lastName: <input type="text" v-model="lastName">
<br>
<button @click="testButton">测试 (lan)</button>
</div>
</template>
<script>
export default {
data () {
return {
firstName: 'yulei',
lastName: 'lan',
fullName: 'lanyulei'
}
},
watch: {
lastName () {
console.log('监听到 lastName 有变化')
this.fullName = this.lastName + ' ' + this.firstName
},
firstName () {
console.log('监听到 firstName 有变化')
this.fullName = this.lastName + ' ' + this.firstName
}
},
methods: {
testButton () {
this.lastName = 'lan'
}
}
}
</script>