计算属性computed

对于任何复杂逻辑，你都应当使用计算属性

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 lastName和firstName还没有发生改变，多次访问fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

举例：

<div id="app">

        {{fullName}}

{{gofullName}}

    </div>

    <script src="./js/vue.js"></script>

    <script>

        const App = new Vue({

            el: '#app',

            data: {

                lastName: 'zeng',

                firstName: 'qinghua'

            },

             methods: {

                gofullName() {

                    return this.lastName + this.firstName

                }

            },

            computed: {

                fullName() {

                    return this.lastName + this.firstName

                }

            }

        })