Vue计算属性computed的get和set方法

vue中computed为计算属性，计算属性是一种带有行为的属性，本质上是方法，但是不能调用。而需要重新渲染时使用methods中的方法会重复调用执行函数，若函数复杂，浏览器性能会降低。使用computed则会缓存计算结果，避免重复计算，从而提高效率。computed中的get方法可简单理解为取值时调用此方法，而set则为重新赋值时调用。<body><div id="app"&g

和世界不一样，那就不一样！

9772人浏览 · 2021-09-28 09:17:31

和世界不一样，那就不一样！ · 2021-09-28 09:17:31 发布

vue中computed为计算属性，计算属性是一种带有行为的属性，本质上是方法，但是不能调用。

而需要重新渲染时使用methods中的方法会重复调用执行函数，若函数复杂，浏览器性能会降低。使用computed则会缓存计算结果，避免重复计算，从而提高效率。

computed中的get方法可简单理解为取值时调用此方法，而set则为重新赋值时调用。

<body>
    <div id="app">
        {{fullName}}
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'wade',
                lastName: 'dean'
            },
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName
                }
            }
        });
    </script>
</body>

打印效果如下：wade dean

我们可以为计算属性中的fullName设置一个对象，对象里面包含get和set方法：

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

程序运行以后控制台打印running get function，说明刚开始调用的是fullName的get方法；
打印效果如下：wade dean

我们在控制台手动修改fullName的值：
vm.fullName = ‘karsa dean’

打印结果：
running set function
running get function
karsa dean’

这时fullName被修改了，于是调用set方法，打印running set function，并且把karsa和dean分别赋值给firstName和lastName，vue检测到计算fullName所依赖的firstName和lastName被修改了，于是重新触发get方法，打印running get function，并且把计算出来的新的fullName的值渲染到页面；

参考原文链接：https://blog.csdn.net/dyw3390199/article/details/112387792