vuejs计算属性getter和setter

当页面获取某个数据的时候，先会在data里面找，找不到就会去计算属性里面找，在计算属性里面，获取的时候会自动去执行get方法

<div id='app'>
　　{{fullName}}
</div>

<script>
　　var vm = new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　firstName: 'Mike',
　　　　　　lastName: 'Lee'
　　　  },
　　　　computed:{
　　　　　　fullName:{
　　　　　　　　get:function(){
　　　　　　　　　　return this.firstName + this.lastName
　　　　　　　　}
　　　　　　}
　　　　}
　　})
</script>

 

 

既然可以写get，自然可以写与之对应的set

<div id='app'>
　　{{fullName}}
</div>

<script>
　　var vm = new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　firstName: 'Mike',
　　　　　　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];
　　　　　　　　}
　　　　　　}
　　　　}
　　})
</script>

当控制台去设置fullName值的时候，会自动执行set方法，比如vm.fullName='Mike Wang',fullName被设置，fullname会打散，重新改变firstName和lastName的值