遇见 vue.js --------阿文的vue.js学习笔记（5）------计算属性和监听器
遇见 vue.js --------阿文的vue.js学习笔记（5）------计算属性和监听器
**
新学习新征程，我们一起踏上学习 vue.js的新长征
遇见 vue.js --------阿文的vue.js学习笔记（1）-----初识vue.js
遇见 vue.js --------阿文的vue.js学习笔记（2—1）----- 基本使用 [1]
遇见 vue.js --------阿文的vue.js学习笔记（2—2）----- 基本使用 [2]
… … …
遇见 vue.js --------阿文的vue.js学习笔记(目录)
关注我，我们一起学习进步。
**
1、计算属性
模板的设计初衷是为了 用于简单运算。但是一旦放入的逻辑过多就会导致模板过重难以维护，所以这个时候就需要我们使用计算属性。
我们先来简单的举个例子来了解以下： 执行结果：你可以看出我们为了实现字母反转的效果，在第一个在花括号内写了很长的东西，但是第二个p内利用了计算属性之后，看起来是十分的简洁 因为第一个传入的就是原本的数据msg，然后在其后面添加了三个方法将其反转； 我们的第二个是声明了一个计算属性 reversmsg 通过属性里面的 getter函数来实现反转的效果。
并且我们的 reversmsg 属性的值始终取决于我们 data 里面 msg的值。他们二者息息相关，因为计算属性，里面就是 通过重新计算传入的 msg 的属性而得到的新的属性。
通常计算属性的写法为：
computed:{<!-- -->
声明新的属性名：function（）{<!-- -->
计算方法
}
}和
computed：{<!-- -->
声明新的属性名：{<!-- -->
get：function（）{<!-- -->
计算方法
}
}
}第二种写法是最完整的写法，
get指getter函数
（1）、比较 计算属性 和 方法
同样的一个函数，我们可以将其设置为属性或者方法。并且二者都能得到相同的效果。但是我们的计算属性是基于它们的响应式依赖进行缓存的。意思就是如果用我们的 计算属性，只要我们的原数据 msg 没有发生改变，那么多次访问 我们的 计算属性 resersmsg 时，它会立刻返回之前计算的结果，而不会再次执行内部的函数；
但是如果写作方法，每一次渲染都会执行内部的函数。
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
{<!-- -->{<!-- -->reversmsg}}
{<!-- -->{<!-- -->reversmsg}}
{<!-- -->{<!-- -->reversmsg}}
<br>
{<!-- -->{<!-- -->fn()}}
{<!-- -->{<!-- -->fn()}}
{<!-- -->{<!-- -->fn()}}
</div>
<script>
var a = 100;
var b = 100;
new Vue({<!-- -->
el:"#a",
data:{<!-- -->
},
//计算属性
computed:{<!-- -->
reversmsg:{<!-- -->
get:function(){<!-- -->
a++;
return a;
}
}
},
//方法
methods:{<!-- -->
fn:function(){<!-- -->
b++;
return b;
}
}
})
</script>
</body>
</html>执行结果： 这里你可以发现因为我们最先传入的原数据a是没有改变的 ，所以在我们的计算属性里，只有第一次调用了 内部的 函数a++ 得到a=101.于是101 别缓存，所以后面的调用=该计算属性，都是直接调用的缓存之后的数据，所以一直都是101；但是我们的方法 methods，每次调用 都会对内部函数进行调用，所以每次都会执行a++，所以值会一直更改
（2）watch 监听属性
你可以简单的理解为监听一个元素，当监听的这个元素发生变化之后，执行里面写的函数。
简单举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
<input type="text" v-model="xing">
{<!-- -->{<!-- -->xingming}} <br />
<input type="text" v-model="ming">
</div>
<script>
new Vue({<!-- -->
el:"#a",
data:{<!-- -->
xing:"李",
ming:"云龙",
xingming:"李云龙"
},
watch:{<!-- -->
xing:function(value){<!-- -->
this.xingming = value + this.ming
},
ming:function(value){<!-- -->
this.xingming = this.xing + value
}
}
})
</script>
</body>
</html>执行结果：就是监听的数据发生更改 在有时候 用watch 比用计算属性 的代码更繁冗，
就好比上面的例子，我们的 watch 部分可以 更改为
computed:{<!-- -->
xingming:function(){<!-- -->
return this.xing + this.ming
}
}效果是一样的。
但是当要在数据变化时执行异步或开销较大的操作时，我们的watch方式是最有用的
**
关注 校园君有话说 公众号 ，回复 web前端 免费领取50G 前端学习资料 一份 ，我们一起学习进步吧。
