Vue-计算属性的getter和setter

是Ryan吖

于 2020-03-25 09:38:02 发布

阅读量428

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45497246/article/details/105087555

版权

Vue 专栏收录该内容

23 篇文章

订阅专栏

Vue的计算属性通常只有getter，但可以添加setter来实现双向绑定。当设置vm.fullName='mike wang'时，setter触发，更新vm.firstName和vm.lastName，由于这些值是fullName getter的依赖，因此导致fullName重新计算并反映在视图中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性默认只有 getter，不过在需要时也可以提供一个 setter：

<body>
    <div id="root">{{fullName}}</div>
    <script>
        var vm = new Vue({
            el:"#root",
            data:{
                firstName:"Z",
                lastName:"Ryan"
            },
            computed: {
                fullName:{
                    get:function(){
                        return this.firstName + ' ' + this.lastName
                    },
                    set:function(value){
                        console.log(value)
                        var arr = value.split(' ')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            },
        })
    </script>
</body>

运行结果截图：
在这里插入图片描述
再运行 vm.fullName = ‘mike wang’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。而这两个值刚好又是fullName的get方法所依赖的值，所以就会引起fullName的重新计算，重新计算之后，fullName随之变化，而页面上显示的{{fullName}}也就跟着变化。