一.计算属性
我们从之前的学习中可以看出，我们可以在模板语法中添加功能，从而改变我们的页面，但是，如果我们在模板语法中添加太多的功能，会使得我们的模板语法显得臃肿，在java，c, python的学习当中，我们会定义一个函数来解决我们主函数臃肿的问题，在这里，我们使用计算属性也非常的类似，但计算属性与方法又有不同之处，我们后面会介绍。
看一个实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
</head>
<body>
<div id = "app">
<p>Original message: {
{
message}}</p>
<p>Reversed message: {
{
ReversedMessage}}</p>
</div>
<script type = "text/javascript">
const app = new Vue({
el:"#app",
data:{
message:"Hello World!",
},
computed:{
ReversedMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
输出结果如下：
二.计算属性与方法
我们从上面的例子看到，计算属性与我们常用的方法十分的类似，那为什么我们要有计算属性呢。实际上，它们还是有一定的区别。在上面的例子当中，如果我们的message没有改变，那么下一次我们相应ReversedMessage的时候，计算属性就会立刻返回之前的结果，而我们常用的方法要重新执行我们的函数。
三.监听事件
我们可以通过添加监听事件来观察我们的属性值是否发生了变化。
还是上面的例子，不过我们添加一个监听事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
</head>
<body>
<div id = "app">
<p>Original message: {
{
message}}</p>
<p>Reversed message: {
{
ReversedMessage}}</p>
</div>
<script type = "text/javascript">
const app = new Vue({
el:"#app",
data:{
message:"Hello World!",
},
computed:{
ReversedMessage:function(){
return this.message.split('').reverse().join('');
}
},
watch:{
message:function(val){
console.log("监听事件触发");
console.log(val);
}
}
})
</script>
</body>
</html>
我们看到，当我们的属性值发生改变的时候，我们的监听事件触发了。