小白学习vue第三天，从入门到精通（computed计算属性）

computed计算属性

<body>
    <div id="app">
        <div>{{myName}}</div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: '彭于晏',
                lastName: '胡歌'
            },
            computed: {
                myName: {
                    set: function (newValue) {
                        const names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[1];
                    },
                    get: function () {
                        return this.firstName + ' ' + this.lastName
                    }
                }
            }
        })
    </script>
</body>

显示内容为：

计算属性的set方法：

 

计算属性有的get方法

 

显示的就是

 

 

computed与method的区别

重要的注意点 computed计算属性有缓存作用，不会反复调用，只有在数据发生变化的时候才会再次调用，比起一般的函数方法，提高了性能优化。method只要调用了就会执行

总结

vue的computed计算属性 有getter 和 setter 两个方法 但是一般 没有set方法 ，只读属性；还有一个重要的注意点 计算属性有缓存作用，不会反复调用，只有在数据发生变化的时候才会再次调用，比起一般的函数方法，提高了性能优化。

posted @ 2021-07-17 18:16  时光向来煞人  阅读(63)  评论(0)    收藏  举报