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方法，只读属性；还有一个重要的注意点计算属性有缓存作用，不会反复调用，只有在数据发生变化的时候才会再次调用，比起一般的函数方法，提高了性能优化。

巴特西

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

computed计算属性

最新文章

热门文章