计算属性的属性

默认的，计算属性实现了 getter 属性，我们可以直接拿到计算属性的值。但是如果尝试对计算属性的值进行修改，会成功吗？

如上，不出意外的在对计算属性进行 setter 操作的时候失败了，Vue 提示我们计算属性 infoc 没有 setter 属性。

实现计算属性的 setter 属性

代码-HTMl

     <div id='app2'>
         {{ infoc }}
     </div>

代码-JS

    <script>
        var app2 = new Vue({
            el: "#app2",
            data: {
                msg1: "hello",
                msg2: "phyger",
                info: "hello phyger"
            },
            watch:{
                msg1: function(){
                    this.info = this.msg1 + ' ' + this.msg2
                },
                msg2: function(){
                    this.info = this.msg1 + ' ' + this.msg2
                }
            },
            computed: {
                infoc:{
                    get: function(){
                        return this.msg1+' '+this.msg2
                    },
                    set: function(newValue){
                        var temInfo = newValue.split(' ')
                        this.msg1=temInfo[0]
                        this.msg2=temInfo[temInfo.length-1]
                    }
                }
            }
        })
    </script>

页面效果

可以看到，在计算属性中实现 setter 属性后，计算属性已经可以进行赋值操作了。而且在赋值过程中，msg1 和 msg2 的值都发生了变化。

Tip

在计算属性中定义 setter 属性的时候，infoc 已经由原来的方法变成了方法的集合。且默认的 getter 属性也要重新定义。

不定义会如何？

如果不重新定义，则 Vue 对象会由于 Getter 属性的缺失而无法渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous" integrity="sha512-qRXBGtdrMm3Vdv+YXYud0bixlSfZuGz+FmD+vfXuezWYfw4m5Ov0O4liA6UAlKw2rh9MOYULxbhSFrQCsF1hgg==" src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
</head>
<body>
    <div id="app2">
        {{ infoc }}
    </div>
    <script>
        var app2 = new Vue({
            el: "#app2",
            data: {
                msg1: "hello",
                msg2: "phyger",
                info: "hello phyger"
            },
            watch:{
                msg1: function(){
                    this.info = this.msg1 + ' ' + this.msg2
                },
                msg2: function(){
                    this.info = this.msg1 + ' ' + this.msg2
                }
            },
            computed: {
                infoc:{
                    // get: function(){
                    //     return this.msg1+' '+this.msg2
                    // },
                    set: function(newValue){
                        var temInfo = newValue.split(' ')
                        this.msg1=temInfo[0]
                        this.msg2=temInfo[temInfo.length-1]
                    }
                }
            }
        })
    </script>
</body>
</html>

将 get 属性的注释去掉

以上就是今天的全部内容了，感谢您的阅读，我们下节再会。

Vue-9-计算属性的属性