Vue computed计算属性

1. computed 计算属性

模板语法插值表达式非常便利 ，但在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，应当使用计算属性。

<div id="app">
      <h1>计算属性的使用</h1>
      
      <!-- 计算属性是有缓存的 -->
      <!-- 只有依赖data里面的数据发生变化了后 那么computed 才会会重新执行   -->
      <p>{{getMsg}} </p>  
      <p>{{getMsg}} </p>
      
      <h2>{{totalNum}}</h2>   <!-- 5050 -->
      <h2>{{totalNum}}</h2>

      <h2>与 methods 对比</h2>
      <p>{{getMsg1()}}</p>
      <p>{{getMsg1()}}</p>
</div>

<script src="./vue.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        num: 100
    },
    methods: {
        getMsg1() {
            console.log('methods'); // 会打印两次 methods methods
            return ' 我是 methods 方法的返回值'
        }
    },
    computed: {
        getMsg(){
            console.log("computed") // 只会打印一次 computed
            return "我是computed的返回值"  // 计算属性必须要有返回值  否则调用 getMsg 的时候无法拿到结果    
        },

        totalNum(){
            console.log("computed")  //computed
            
            let sum = 0;
            for(var i = 1; i <= this.num; i++){  // this ===  vm
                sum += i
            }
            return sum  
        }
    }
});

计算属性(computed)与方法(methods)的区别: 计算属性是基于它们的响应式依赖进行缓存的，而方法不缓存