推荐：Vue汇总
Vue - 侦听器 watch 和计算属性 computed
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>computed</title><script src="./js/vue.js"></script>
</head>
<body><div id="div">{
{firstName + " " + lastName}}</div>
</body>
</html>
<script>var vue = new Vue({
el: '#div',data: {
firstName: 'Li',lastName: 'Kaven'}}) </script>
效果：
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
使用methods自定义方法进行改造：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>computed</title><script src="./js/vue.js"></script>
</head>
<body><div id="div">{
{fullName()}}</div>
</body>
</html>
<script>var vue = new Vue({
el: '#div',data: {
firstName: 'Li',lastName: 'Kaven'},methods:{
fullName(){
return this.firstName + " " + this.lastName;}}}) </script>
效果：
但这个还是不够完美，每次渲染页面时，这个方法都会被调用一次，这样会造成性能的损失。
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>computed</title><script src="./js/vue.js"></script>
</head>
<body><div id="div">{
{fullName()}}{
{count}}</div>
</body>
</html>
<script>var vue = new Vue({
el: '#div',data: {
firstName: 'Li',lastName: 'Kaven',count: 1},methods:{
fullName(){
console.log('重新计算');return this.firstName + " " + this.lastName;}}}) </script>
效果：
改变count时，fullName()也会被调用一次。
Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，可以使用 watch。
使用watch进行改造：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>computed</title><script src="./js/vue.js"></script>
</head>
<body><div id="div">{
{fullName}}{
{count}}</div>
</body>
</html>
<script>var vue = new Vue({
el: '#div',data: {
firstName: 'Li',lastName: 'Kaven',fullName: 'Li Kaven',count: 1},watch:{
firstName: function (val) {
console.log('重新计算');this.fullName = val + " " + this.lastName;},lastName: function (val) {
console.log('重新计算');this.fullName = this.firstName + " " + val;}}}) </script>
效果：
但现在还不够完美，这样侦听属性太麻烦了，如果属性比较多，就会很繁琐。
接下来就使用计算属性computed来进行改造：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>computed</title><script src="./js/vue.js"></script>
</head>
<body><div id="div">{
{fullName}}{
{count}}</div>
</body>
</html>
<script>var vue = new Vue({
el: '#div',data: {
firstName: 'Li',lastName: 'Kaven',count: 1},computed: {
fullName: function () {
console.log('重新计算');return this.firstName + " " +this.lastName;}}}) </script>
效果：
这里我们声明了一个计算属性fullName。我们提供的函数将用作property vue.fullName的 getter 函数。
你可以打开浏览器的控制台，自行修改例子中的 vue。vue.fullName 的值始终取决于vue.firstName和vue.lastName的值。
你可以像绑定普通 property 一样在模板中绑定计算属性。Vue知道vue.fullName依赖于vue.firstName和vue.lastName，因此当vue.firstName或vue.lastName发生改变时，所有依赖vue.fullName 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的getter函数是没有副作用的，这使它更易于测试和理解。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
如果只是侦听属性就可以使用 watch。
计算属性的 setter
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>computed</title><script src="./js/vue.js"></script>
</head>
<body><div id="div">{
{fullName}}{
{count}}</div>
</body>
</html>
<script>var vue = new Vue({
el: '#div',data: {
firstName: 'Li',lastName: 'Kaven',count: 1},computed: {
fullName: {
// getterget: function () {
return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {
var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}}) </script>
效果：
vue.fullName改变了，vue.lastName也相应跟着变了（vue.firstName也是一样）。
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！