Vue计算属性 computed

计算属性 computed

• 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
• 计算属性是基于它们的响应式依赖进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

 <div id="app">
     <!--  
        当多次调用 reverseString  的时候 
        只要里面的 num 值不改变 他会把第一次计算的结果直接返回
		直到data 中的num值改变 计算属性才会重新发生计算
     -->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
     <!-- 调用methods中的方法的时候  他每次会重新调用 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      //computed  属性 定义 和 data 以及 methods 平级 
      computed: {
        //  reverseString   这个是我们自己定义的名字 
        reverseString: function(){
          console.log('computed')
          var total = 0;
          //  当data 中的 num 的值改变的时候  reverseString  会自动发生计算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
          // 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果    
          return total;
        }
      }
    });
  </script>

为什么使用计算属性computed时不用()

计算属性的实质为属性，其中定义了set()方法和get()方法：

而一般使用中不需要set方法，我们只需要get方法，因此计算属性一般为“只读属性”。

去掉无用的set方法后，computed属性简写为我们常见的方式：

因此，只是形式上看起来像函数，实质上computed计算属性是属性。使用计算属性时，直接使用{{fullName}}，不要加()。

计算属性和方法的区别:(面试)

1. 计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性，
2. methods方法没有计算结果缓存起来，data任何数据（不管该方法是否使用）发生改变，方法都会被重新调用一遍
3. 故计算属性computed被使用时会进行缓存，如果需要多次使用，则只需要调用1次；而methods中的函数无缓存，如果需要使用n次，则需要调用n次。
4. 方法常常是作业的事件使用,计算属性常常是动态计算结果时使用

补充:关于计算属性 函数什么情况下调用

//计算属性使用时当做属性使用
//计算属性设计时当做函数设计(就像es6中的属性)
//当计算属性的函数中使用到的data中的数据发生变化时,计算属性就会重新执行并刷新UI
//问题1.如果是修改了data中监听的某个的属性值 计算属性就会运行
//问题2.如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行
//比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性
//3.解决问题2的办法a:把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性
//解决问题2的办法b:赋值JSON.parse(JSON.stringfy(data))

methods:{ 
 change(arg,index1){
	 this.arr[index1]=arg
	 this.arr=[...this.arr]
 }
}
computed:{
	total(){
		//eval(this.arr.join("+"))
		//  eval("100+200+88")==>把字符串当做代码运行 产生运算结果
		return  eval(this.arr.join("+"))
		}
	}