在computed、methods、watch方法中,对于优缺点
computed是存在缓存机制
当对于computed,在其他变量进行变化时候,触发computed,只有computed相关变量进行变化的时候才会触发
<!DOCTYPE html>
<html>
<head>
<title>计算属性、方法、侦听器</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">{{fullName}}</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data(){
return{
firstName:"DELL",
lastName:"Lee",
//fullName:"DELL lEE"
age:20
}
},
/*methods:{
fullName:function(){
return this.firstName + "" +this.lastName
}
},*/
computed:{
fullName:function(){
console.log("变化一次")
return this.firstName + "" +this.lastName
}
}
/*watch:{
firstName:function(){
console.log("变化一次")
this.fullName = this.firstName + "" + this.lastName
},
lastName:function(){
return this.fullName = this.firstName + "" + this.lastName
}
}*/
})
</script>
</body>
</html>
在age变化的时候,并不会触发computed,只有当firstName和lastName变化的时候才会触发
methods在页面渲染的时候就会重新触发
依旧是上面的代码,当methods方法进行渲染,改变age,此时页面会触发methods方法
watch侦听器也是存在缓存机制,只有在侦听的元素进行变化的时候,这个函数才会被触发。
当age改变得时候,并不会触发watch侦听器,当你改变firstName得时候,会触发一次watch函数里面得firstName方法,从而得到变化一次得响应