计算属性的基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{computedNum}}
</div>
<script>
const vue=new Vue({
el:"#app",
data :{
num:1
},
computed: {
computedNum(){
this.num++;
return this.num;
}
}
})
</script>
</body>
</html>
计算属性中通常都会放一些对属性的进行处理的逻辑代码,就比如this.num++ 。如果,将这些代码放到模板中就会使得模板难以重用,并且难以维护。
计算属性的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="numAdd">用方法将数字加1</button>
{{computedNum}}
</div>
<script>
const vue=new Vue({
el:"#app",
data :{
num:1
},
computed: {
computedNum(){
console.log("计算属性中的num的值是"+this.num);
return this.num;
}
},
methods: {
numAdd(){
this.num++;
}
}
})
</script>
</body>
</html>
当我们点击按钮让num自增的时候,运行结果如下图:
当我们让num自增的时候,发现他还执行了计算属性中的代码。所以,得到结论当我们更新了计算属性关注的属性的值之后,对应的也会执行计算属性中的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="numAdd">用方法将数字加1</button>
<button @click="computedMothod">查看计算属性的值</button>
</div>
<script>
const vue=new Vue({
el:"#app",
data :{
num:1
},
computed: {
computedNum:function(){
console.log("计算属性中的num的值是"+this.num);
return this.num;
}
},
methods: {
numAdd(){
this.num++;
console.log(this.num);
},
computedMothod(){
var number= this.computedNum;
console.log(number);
}
}
})
</script>
</body>
</html>
我们通过方法去改变num的值,然后在另一个方法中去调用自动属性。多级让num自增,然后点击查看计算属性的按钮,运行结果,如图:
多次点击方法,每一次方法都会执行,但是多次点击查看计算属性的按钮,发现它只是在第一次点击的时候执行了计算属性中的代码。
所以,得到结论计算属性是有缓存的。如果计算属性中关注的数据没有发生变化, 当我们再次访问该计算属性时,并不会执行计算属性中的代码,而是将上一次的运行结果返回给我们。
还有一点就是:计算属性并不是一个方法,而是一个属性。
查看vue对象,如图:
计算属性是和$data是同一级的,而$data是vue的一个属性,所以说计算属性并不是一个方法,而是一个属性。