通过代码和浏览器的控制台让大家区分Vue的计算属性、方法个侦听器
我个人习惯把笔记写在代码中,话不多说,放码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性,方法,侦听器</title>
<script src = "./vue.js"></script>
</head>
<body>
<div id="app">
方法:
{{fullname1()}}
{{age}}
<br/>
计算属性:
{{fullname2}}
{{age}}
<br/>
侦听器:
{{fullname3}}
{{age}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstname:"Crown",
lastname:"New",
fullname3:"Crown New",
age:28
},
//1.用方法完成名字的组合
//方法内部没有缓存机制,相关的值即便没有改变,刷新页面时仍旧需要重新计算
methods:{
fullname1:function(){
console.log("方法计算了一次")
return this.firstname + " " + this.lastname
}
},
//2.用计算属性完成名字的组合
//自带缓存,如果相关的值没有改变,改变页面其他元素的值,不需要重新计算
computed:{
fullname2:function(){
console.log("计算属性计算了一次")
return this.firstname + " " + this.lastname
}
},
//3.侦听器完成计算
//侦听器也自带缓存,如果相关的值没有改变,改变页面其他元素的值,不需要重新计算
//但是侦听器的代码量相比于计算属性更大,故若二者均可,优先使用计算属性
watch:{
firstname:function(){
console.log("侦听器计算了一次")
this.fullname3 = this.firstname + " " + this.lastname
},
lastname:function(){
console.log("侦听器计算了一次")
this.fullname3 = this.firstname + " " + this.lastname
}
}
})
</script>
</body>
</html>
代码是可以直接使用的,只需要从vue官网下载vue.js放在根目录即可,下边是控制台的图解
1.刚打开控制器时
可见,计算属性和计算方法分别进行了一次计算,而侦听器是直接渲染值,不需要进行计算
2.我们首先通过控制台对与计算不相关的值进行更改
控制台输出:方法计算了一次,可知计算属性自带缓存,如果相关的值没有改变,改变页面其他元素的值,不需要重新计算,而侦听器并未侦听age,也不需要重新计算
3.下面通过控制台对与计算相关的值进行更改
此时计算属性、方法和侦听器均进行了计算