十五、Vue详解计算属性的setter与getter

计算属性默认有getter，如果需要时也可以提供一个setter。那么什么是getter与setter呢？可以这样去理解，get获取值，set设置值。Vue中也确实是这样的。

<div id="app">
    <!--通过计算属性中的get与set-->
    {{ fullName }}
    <!--计算属性-->
    {{ getFullName }}
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            webName:"自如初",
            webUrl:"https://www.ziruchu.com",
            desc:"一个记录学习的博客",
        },
        computed:{
            // 计算属性
            getFullName:function(){
              return this.webName + " " + this.webUrl;
            },
            // 计算属性中的get与set
            fullName: {
                get: function () {
                    return this.webName + " " + this.webUrl;
                },
                set: function(value) {
                    let arr = value.split(" ");
                    this.webName = arr[0];
                    this.webUrl  = arr[1];
                }
            }
        }
    });
</script>

上述案例，fullName使用了计算属性中的get与set实现。计算属性中默认使用get，因此getFullName与fullName的实现是一样的。

1）创建一个计算属性fullName，这个计算属性中有2个方法，get与set。当在模板中使用{{fullName}}时，计算属性中的get方法就会调用，与此同时getFullName计算属性也被调用了；

2）当对fullName依赖的数据进行修改时，那么就会触发fullName中的set方法，该方法接收要修改的数据，当对依赖的数据修改时，视图所展示的数据也就发生了变化。

2020-12-03