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>