Vue 中计算属性的 setter 和 getter

2024年5月26日 80次阅读 来源: UCCs

计算属性其实是非常强大的，这一节深入的学习下计算属性，先看一段代码：

<div id="app">
    {{fullName}}
</div>
let vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Dell',
        lastName: 'Lee'
    },
    computed: {
        fullName(){
            return this.firstName + ' ' + this.lastName
        }
    }
})

插值表达式{{fullName}}首先回去data中去找fullName这个属性，找不到再去计算属性中去找，找到之后在将它显示在页面之中。

计算属性中的fullName我们换一种写法：


<div id="app">
    {{fullName}}
</div>
let vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Dell',
        lastName: 'Lee'
    },
    computed: {
        fullName:{
            get(){
                return this.firstName + ' ' + this.lastName
            },
            set(value){
                var arr = value.split(' ')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
})

当我去使用这个计算属性的时候，调用插值表达式，去读这个内容，它就会走get的方法

当我去设置这个属性属性值的时候，set方法会被执行，同时会拿到设置的这个值，我就可以通过这个值去设置firstName和lastName。

computed有这样一个特性，它呢什么时候会重新计算，当它依赖的值发生变化时，它就会重新去计算 ，重新计算之后，那么你看，当你set fullName时，this.firstName的值就会发生变化，恰好这个值又是fullName所依赖的一个值，所以就会引起fullName的重新计算，重新计算之后，fullName的值变了，页面上显示的fullName也就跟着变了。

    原文作者：UCCs
    原文地址: https://segmentfault.com/a/1190000018120274
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞