共计 2014 个字符，预计需要花费 6 分钟才能阅读完成。
对于很多初学 vue 的初级前端开发工程而言，在了解了 vue 双向数据绑定 v -model、模板语法、实例创建等基础的知识之后，对于一些复杂的数据操作还无从下手。
首先，什么是计算属性？
在 vue 官方文档中，对计算属性的初衷是由于模板内部的表达式虽然已经很便利，但是它只能进行简单的运算，而且面对复杂逻辑的时候，模板过重并且难以维护，所以官方给的建议是对于任何复杂的逻辑都应当使用计算属性。
那么，我们为什么要使用计算属性呢？它到底有什么好处，可以给我们带来哪些便利呢？
我们一起来看下以下代码
<div id="app">
{{message.split('').reverse().join('') }}
</div>
var vm = new Vue({
el: '#example',
data: {message: 'Hello'}
})对于初学着来说，如果要拆分对 message 进行处理或者其他的复杂操作，我们可能会想到上面这种形式去处理，但是如果说，要实行 for 循环呢？
有人会说，我可以在 `methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')}
}`
这样写，
但是，如果我需要这个 message 动态的去改变呢？
为了适应复杂的业务逻辑，计算属性 cumputed 就横空出世了，虽然 cumputed 和 methods 可以完成同样的事情，但是 copmputed 是基于依赖进行缓存的，然而 methods 需要每一次的去进行计算。
我们可以改写这个例子
<div id="app">
<h1>{{reversedMessage}}"</h1>
</div>
var app = new Vue({
el: '#app',
data: {message: 'Hello'},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 app 实例
return this.message.split('').reverse().join('')
}
}
})我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。此时你可以动态的去修改 message 的值，可以动态的看到 reversedMessage 再动态的更新。
其次：计算属性是没有 setter 的，默认的情况下只有 getter
不过你可以添加一个 setter 进去。
例子：
<div id="app">{{allName}}</div>
// 用 computed 实现
var vm = new Vue({
el: '#app',
data: {
her: '尼古拉斯赵四',
he: '刘英'
},
computed: {allName: function () {get: function () {return this.her+ '的女儿是' + this.lastName},
// setter
set: function (newValue) {var names = newValue.split(' ')
this.her= names[0]
this.he= names[names.length - 1]
}
}
}
})现在运行 vm.allName 时，setter 也会执行，vm.her 和 vm.she 也会被更新
Watch
虽然计算属性很强大，但是面对复杂的业务需求和奇特的产品经理（虽然很多时候你都想狠狠地胖揍他一顿）的时候，我们也需要一个自定义的侦听器去检测数据的动态变化，当数据进行异步或者数据的开销比较庞大的时候，这个时候 watch 就显得比较有用了
`<div id=”app”>
<button @click=”add”>add</button>
<p> 点击次数:{{num}}</p>
</div>
var vm = new Vue({
el: ‘#app’,
data: {
num: 10},
watch: {
// 监听数据的变化做出对应的改变，并不会生成新的属性
num (val) {if (val< 5) this.alert()}},
methods: {
alert () {alert('点击次数达到'+this.number+'次啦')
},
add () {this.number -= 1}}
})`
当你点击的时候执行 add 方法，改变 num 的值，而 watch 正在监听 num 的变化，此时当 num<5 时, 即刻执行 alert 方法，点击次数到达了 4 次啦。
在我们需要依赖动态的去改变 data 的值之后进行逻辑其他逻辑操作的时候以及我们需要监听数据结构层次比较高的时候可以使用 deep 属性进行深度监听。
好了，喜欢的朋友请关注下方公众号，每天不定期更新更多前沿前端技术内容。
