vue computed用法（get/set）

computed與data、methods等同級使用，默認只有getter計算屬性

method、computed和watch的區別

1. computed屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用,使用的時候不加（）；
2. methods方法表示一個具體的操作，主要書寫業務邏輯；
3. watch一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體

計算屬性； 特點：當計算屬性中所以來的任何一個 data 屬性改變之后，都會重新觸發 本計算屬性 的重新計算，從而更新 fullName 的值

body中代碼

<div id='app'>
        姓氏：<input type="text" v-model="firstname">+
        名字<input type="text" v-model="lastname">
        全稱：<input type="text" v-model="allname">
</div>

script中代碼（computed中名稱不能和data中重復）（默認計算屬性）

<script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                // allname:''
            },
            // 計算屬性  不能和data中數據重復
            computed: {
                // 默認只有getter
                allname(){
                    return this.firstname + '-' + this.lastname
                }
            }
        })
    </script>

圖示：輸入姓氏和名字轉化為用“-”鏈接格式

 

 

getter和setter計算屬性，script代碼（雙向操作，可以根據全程拆分為姓氏和名字）

<script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                // allname:''
            },
            methods: {
            },
            // 計算屬性  不能和data中數據重復
            computed: {
                // getter和setter
                allname: {
                    get(vuevalue) {
                        return this.firstname + "-" + this.lastname

                    },
                    set(value) {
                        this.firstname = value.split("-")[0]
                        this.lastname = value.split("-")[1]
                    }
                }
            }
        })
    </script>