1.计算属性,方法和侦听器
<div id="app">
{{fullName}} <!--计算属性-->
{{age}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
firstName:'Dell',
lastName:'Lee',
fullName:'Dell Lee',
age:28
},
computed: {
//计算属性的值是一个函数
//计算属性内置缓存的,计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
//例如我要改变age的值,计算属性fullName的值是不会执行重新计算的
fullName:function(){
console.log('计算了一次');
return this.firstName+' '+this.lastName;
}
},
methods: {
//例如我要改变age的值,fullName()会被调用。只要有数据改变,渲染页面就会被调用,内部没有缓存的机制
fullName:function(){
console.log('计算了一次');
return this.firstName+' '+this.lastName;
}
},
watch: {
//侦听器
//缓存机制,侦听的属性没有变化的话,就会使用缓存的值
firstName:function(){ //firstName 改变的时候才会重新计算fullName的值
console.log('计算了一次');
this.fullName=this.firstName+' '+this.lastName;
},
lastName:function(){ //lastName 改变的时候才会重新计算fullName的值
console.log('计算了一次');
this.fullName=this.firstName+' '+this.lastName;
}
},
})
</script>
2.计算属性的getter和setter
<div id="app">
{{fullName}} <!--计算属性-->
</div>
<div id="app">
{{fullName}} <!--计算属性-->
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
firstName:'Dell',
lastName:'Lee',
},
computed: {
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(value){
var arr=value.split(" ");
this.firstName=arr[0];
this.lastName=arr[1];
}
}
},
})
//现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
</script>