Vue学习：7.计算属性2

上一节了解的是计算属性的默认简写，只能读取，不能修改。

什么意思呢？很简单，我们知道计算属性是依赖数据动态计算一个值，那我可不可以直接this.计算属性 = xxx 来修改计算属性的结果呢？这其实是不行的！因为上一节中我们写的是计算属性的默认简写，只能构读取数据，如果要进行修改，必须写它的完整形式。

Vue 中计算属性的完整写法涉及到定义一个对象，该对象包含 get 和 set 方法，分别用于获取和设置计算属性的值。这种写法允许我们不仅在依赖其他数据时动态计算一个值，还能监听对该计算属性的直接赋值操作，并在值被设置时执行相应的逻辑。

实例：改名卡

实现功能：

依赖Vue实例数据动态显示姓和名，同时根据表单输入更改姓和名。

思路：

使用get()方法动态渲染，然后使用v-model绑定表单输入，同时使用set()方法修改Vue实例数据，最后再次使用get()方法动态渲染。

代码：

html：

<div id="app">
        姓：<input v-model="firstName" type="text"> +
        名：<input v-model="lastName" type="text"> =
        <span>{{ fullName }}</span>
        <br>
        改名:<input @keyup.enter="changeName()" v-model="newname" style="width: 100px;">
        <button @click="changeName()">改名卡</button>
</div>

js：

<script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: '马',
                lastName: '超',
                newname: ''
            },
            methods: {
                // 该函数不能设置computed的属性
                changeName(){
                    this.fullName = this.newname
                }
            },
            // 计算属性完整写法：get()+set()，获取和修改
            //  修改的底层逻辑：首先修改的值被传递给set()的形参
            //  然后修改数据，最后再执行一遍get()
            computed: {
                fullName:{
                    get(){
                        return this.firstName + this.lastName
                    },
                    //对字符串进行切片处理获得姓和名
                    set(value){
                        this.firstName = value.slice(0,1)
                        this.lastName = value.slice(1)
                    }
                }
            }
        })
 </script>