目录
一 点睛
1 什么是计算属性
计算属性的重点突出在属性两个字上,首先它是个属性(属性是名词),其次这个属性有计算(计算是动词)的能力,这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成静态的属性)。
一些常用的函数,可以缓存起来,在调用时直接使用缓存中的结果,以此来提高效率。
注意:computed里虽然存放的是函数。但在调用时,computed里的东西是一个属性。所以我们在调用时不能使用(),因为()是在调用函数,而不是在调用属性。
2 watch的用法
watch用于监控参数的变化,并调用函数,newVal是能获得参数新的值,oldVal是参数来的值。
在 watch 中给属性(普通属性或计算属性)绑定函数,当属性的值发生变化时,该函数就会自动被调用。调用时可以接收两个参数,第一个参数是属性改变后的值,第二个参数是属性改变前的值。
二 代码
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>计算属性与监听器</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- 挂载点 -->
<div id="root">
<div>姓:<input v-model="firstname"></input></div>
<div>名:<input v-model="lastname"></input></div>
<div>{{fullname}}</div>
<div>{{count}}</div>
</div>
<script type="text/javascript">
// 实例
new Vue({
el: "#root",
data: {
firstname: "",
lastname: "",
count: 0,
},
// 定义计算属性
computed: { // 依赖属性发生变化才会重新计算,当firstname或lastname发送变化时才重新计算computed
fullname: function(){
return this.firstname+" "+this.lastname
}
},
// 定义一个监听器,当某个数据发生变化,触发监听器函数执行
watch: {
// firstname: function(){
// this.count++
// },
// lastname: function(){
// this.count++
// }
fullname: function(){ // 可以监听计算属性的变化,当fullname发送变化时,触发函数执行
this.count++
}
}
})
</script>
</body>
</html>