Vue实例选项之【computed】

技术的搬运工

于 2021-02-24 22:02:45 发布

阅读量275

点赞数

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

本文链接： https://blog.csdn.net/IT_Boy_/article/details/114043559

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

computed

显示效果

methods 和 computed 选项的区别

computed 的 setter 和 getter 属性

computed

计算属性在处理一些复杂逻辑时是很有用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例选项之【computed】</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>原始字符串：{{message}}</p>
        <!-- 注意这里 reversedMessage 是不用括号的，因为他是计算属性 -->
        <p>计算后反转的字符串：{{reversedMessage}}</p>

        <p>使用方法后反转的字符串: {{reversedMessage2()}}</p>

        <!-- computed setter 和 getter 测试 -->
        <p>site：{{site}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: { // 数据属性
                message: 'csdn!',

                name: 'csdn',
                url: 'https://www.csdn.net'
            },
            methods: { // 方法属性
                reversedMessage2: function () {
                    return this.message.split('').reverse().join('')
                }
            },

            /**
             * 声明了一个计算属性 reversedMessage
             提供的函数将用作属性 vm.reversedMessage 的 getter
             vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新
             */
            computed: { // 计算属性
                // 计算属性的 getter，默认
                reversedMessage: function () {
                    // this 指向 vm 实例
                    return this.message.split('').reverse().join('')
                },

                site: {
                    // getter
                    get: function () {
                        return this.name + ' ' + this.url
                    },
                    // setter
                    set: function (newValue) {
                        var names = newValue.split(' ')
                        this.name = names[0]
                        this.url = names[names.length - 1]
                    }
                }
            }
        })
        // 调用 setter, vm.name 和 vm.url 也会被对应更新，vm 是上面定义的 Vue 实例
        vm.site = 'csdn https://www.csdn.net';
        document.write('name：' + vm.name);
        document.write('<br>');
        document.write('url：' + vm.url);
    </script>
</body>

</html>

显示效果

methods 和 computed 选项的区别

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed 的 setter 和 getter 属性

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


    <script>
        var vm = new Vue({
            el: '#app',
            data: { // 数据属性
                message: 'csdn!',

                name: 'csdn',
                url: 'https://www.csdn.net'
            },
            methods: { // 方法属性
                reversedMessage2: function () {
                    return this.message.split('').reverse().join('')
                }
            },

            /**
             * 声明了一个计算属性 reversedMessage
             提供的函数将用作属性 vm.reversedMessage 的 getter
             vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新
             */
            computed: { // 计算属性
                // 计算属性的 getter，默认
                reversedMessage: function () {
                    // this 指向 vm 实例
                    return this.message.split('').reverse().join('')
                },

                site: {
                    // getter
                    get: function () {
                        return this.name + ' ' + this.url
                    },
                    // setter
                    set: function (newValue) {
                        var names = newValue.split(' ')
                        this.name = names[0]
                        this.url = names[names.length - 1]
                    }
                }
            }
        })
        // 调用 setter, vm.name 和 vm.url 也会被对应更新，vm 是上面定义的 Vue 实例
        vm.site = 'csdn https://www.csdn.net';
        document.write('name：' + vm.name);
        document.write('<br>');
        document.write('url：' + vm.url);
    </script>