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的值