Vue的计算属性和监听属性
2020-11-23 本文已影响0人
暖A暖
Vue 中的计算属性
使用计算属性（computed）有一个好处在于它有一个缓存机制，因此它不需要每次都重新计算。当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的 DOM 部分也会同步自动更新。在处理一些复杂逻辑时计算属性是很有用的。
在 Vue 中我们可以使用模板语法 {{}} 来展示一些数据，而当在模板中放入太多的逻辑会让模板过重且难以维护。这种情况下，Vue 给我们提供了一个特别好的解决方法，就是使用计算属性。我们可以将一些需要计算的过程写入到一个计算属性中去，然后让它动态的计算就可以了。
示例：
下面我们通过一个例子来看一下计算属性的使用，下面是一个用于求和的小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的属性_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<h1>创建第一个Vue应用</h1>
<div id="app">
<!-- 大侠是只喵喵 -->
<p>大侠的体重为：{{a}}千克</p>
<p>水星仔的体重为：{{b}}千克</p>
<p>小师妹的体重为: {{c}} 千克</p>
<p>它们的体重之和为:{{a + b + ｃ}}千克</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
a:10,
b:65,
c:44
}
}
})
</script>
</body>
</html>
此时我们要对数据求和，是不是需要在模板中将 a、b、c 等属性都加起来，例如上述的 {{a + b + c}}，这样会很不方便，且会让模板过重且难以维护。
但是如果我们使用计算属性，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的属性_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<h1>创建第一个Vue应用</h1>
<div id="app">
<!-- 大侠是只喵喵 -->
<p>大侠的体重为：{{a}}千克</p>
<p>水星仔的体重为：{{b}}千克</p>
<p>小师妹的体重为: {{c}} 千克</p>
<p>它们的体重之和为:{{sum}}千克</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
a:10,
b:65,
c:44
}
},
computed:{
// sum就是计算属性
sum:function(){
return this.a + this.b + this.c
}
}
})
</script>
</body>
</html>
这样在 computed 中定义一个计算属性 sum 后，就不用在模板中进行复杂的计算了。效果图如下所示：
Vue中的监听属性
监听属性（watch）可以监听一个函数或者是一个变量，通过 watch 来响应数据的变化。虽然大多数情况计算属性都可以满足需要，但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时，就需要自定义监听器。
示例：
例如我们想实现一个计数器，我们可以通过 watch 来响应数据的变化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的属性、方法和生命周期_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<h1>计数器的实现</h1>
<div id="app">
<p>计算器：{{num}}</p>
<button @click="num++">点我加一</button>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
num: 1
}
}
})
// 监听器
app.$watch('num', function(navl, oval){
alert("计数器的值从 " + oval + "变为" + navl);
});
</script>
</body>
</html>
watch 这个对象里面是一个函数，函数的名称是 data 中的属性名称（即num），且 watch 中的函数不需要调用。
当属性 num 发生改变，就会触发 watch 函数（num 所对应的函数），每个函数都会接受两个值，一个是新值(navl)，一个是旧值(oval)。
我们来看代码在浏览器中的演示效果：
当我们点击
点我加一 按钮时，会弹出上图中的弹出层，告诉我们“计数器的值从 1 变为 2”，然后我们点击弹出层的 “确认” 按钮，计数器显示会变成 2。
