-
1 内容
-
2 案例
计算属性与监听属性
概述：为了让模板的语法看起来更加的简洁，同时不影响代码和内容的可用性，Vue.js框架提出了计算属性和监听属性。
1、计算属性 computed
一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。例如以下的代码：
下列代码中，{{}}插值模板中不再是简单的数据绑定，而是包含了一些逻辑处理，一般在处理这些比较复杂的逻辑处理时，Vue.js框架提倡使用计算属性来处理，在计算属性当中，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果。
不建议这样做：
<div id="app">
<p>{{msg.split("").reverse().join("")}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
}
})
</script>
建议这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{reverseMsg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
},
computed:{
reverseMsg(){
return this.msg.split("").reverse().join("")
}
}
})
</script>
</body>
</html>
注意：计算属性和方法的区别
Vue实例中的methods也可以完成计算的功能，与计算属性的作用相同。那么为什么在做计算的时候通常选择计算属性而不选择方法呢？因为计算属性是基于他的依赖缓存的，所以只有当其依赖的数据发生改变的时候，才会重新求值。这就意味着，只要依赖的数据没有发生改变，多次访问计算属性就会立即返回之前的计算结果，不必再次执行函数。而methods不同，他每调用一次就执行一次函数，所以computed 和 methods相比，computed有缓存，性能开销小
2、监听属性 watch
Vue.js中的事件处理方法可以根据用户的需要自定义，能通过单击事件、鼠标事件等触发，但是不能自动监听当前Vue实例对象的状态的变化。为了解决上述问题，Vue.js提供了watch状态监听功能，只要监听到当前Vue实例中数据的变化，就会调用当前数据所绑定的事件处理方法。
例如实现以下案例：
要求：1、在输入框内输入借款的金额数据，拿填入输入框的数值和最大金额做对比，如果大于可借额度，则提示“单笔借款金额最高￥1000”
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.tip {
color: red;
font-size: 14px;
}
</style>
<body>
<div id="app">
￥<input type="text" placeholder="请输入借款金额" v-model.number="money">
<p class="tip">{{tip}}</p>
</div>
<script src="../js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
money: "",
tip: ""
},
watch: {
money(newVal, oldVal) {
if (newVal > 1000) {
this.tip = "单笔借款金额最高￥1000";
}else{
this.tip = "";
}
}
}
})
</script>
</body>
</html>
总结：computed和watch的使用场景对比
computed
当一个结果受多个值影响时候就需要用到computed
最典型的例子： 购物车商品结算的时候
watch
当一个值变化触发多个响应事件的时候就需要用watch
最典型的例子： 搜索数据
