vueの计算属性computed

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

语法

<!--html-->
<div>计算属性 : {{fullName}}</div>

//js
var vm = new Vue({
    el: "#app",
    data: {
        firstName: "Lee",
        lastName: "Geing",
        fullName: "LeeGeing"
    },
    //计算属性
    computed: {
        fullName:function() {
            return this.fullName = this.firstName + this.lastName;
        }
    }
});

计算属性 computed 有缓存的机制，如果依赖的值没有变化，是不会进行改变的，这样做的好处是减少性能的损耗。

计算属性缓存和方法的区别

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

方法 methods : 数据的每次变换都会重新加载一次。

监听 watch: 只有变换的那个数据会被重新加载。

完整代码如下

<!--html-->
<div id="app">
    <!-- 计算属性 -->
    <div>计算属性 computed :有缓存的机制，如果依赖的值没有变化，是不会进行改变的，这样做的好处是减少性能的损耗</div>
    <div>计算属性 : {{fullName}} {{age}}</div>
    <hr>
    <!-- 方法属性 -->
    <div>通过方式去实现的数据更改，改变数据会重新加载一次 DOM</div>
    <div>方法 : {{ fullNameFuc() }} {{age}}</div>
    <hr>
    <!-- 监听 -->
    <div>监听 : {{ fullName2 }} {{age}}</div>
</div>

//js
var vm = new Vue({
    el: "#app",
    data: {
        firstName: "Lee",
        lastName: "Geing",
        fullName2: "LeeGeing",
        age: 23
    },
    //计算属性
    computed: {
        fullName:function() {
            console.log("computed 执行了一次");
            return this.firstName + this.lastName;
        }
    },
    //方法
    methods: {
        fullNameFuc:function() {
            console.log("methods 执行了一次");
            return this.firstName + this.lastName;
        }
    },

    //监听
    watch: {
        //监听firstName
        firstName:function(){
            console.log("监听firstName 执行了一次");
            this.fullName2 = this.firstName + this.lastName;
        },
        //监听lastName
        lastName:function(){
            console.log("监听lastName 执行了一次");
            this.fullName2 = this.firstName + this.lastName;
        }
    }

});