计算属性的属性

2022 年 6 月 14 日
本文字数：1539 字
阅读完需：约 5 分钟

计算属性的属性

默认的，计算属性实现了 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>