Vue.js 计算属性

不用.computed

<script src="https://how2j.cn/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>       
        <tr>
        	<td align="center" colspan="2">
        	汇率： <input type="number" v-model.number="exchange" />
        	</td>
        </tr>
        
        <tr>
        
        	<td align="center">
        		￥: <input type="number" v-model.number = "rmb"  />
        	</td>
        	<td align="center">
        		$: {{ rmb/exchange }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  exchange:6.4,
          rmb:0
      }
    })
     
</script>

.computed

如果运算过程比较复杂，那么维护起来就比较麻烦。
{{ rmb/exchange }}
所以可以把运算过程，都放在computed里去，只用显示运算结果就好了。
{{ dollar }}

<script src="https://how2j.cn/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>       
        <tr>
        	<td align="center" colspan="2">
        	汇率： <input type="number" v-model.number="exchange" />
        	</td>
        </tr>
        
        <tr>
        
        	<td align="center">
        		￥: <input type="number" v-model.number = "rmb"  />
        	</td>
        	<td align="center">
        		$: {{ dollar }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  exchange:6.4,
          rmb:0
      },
      computed:{
          dollar:function() {
              return this.rmb / this.exchange; 
          }
      }
    })
     
</script>

methods

methods 也能达到一样的效果，调用的时候，要加上括号
{{ getDollar() }}

methods与computed区别

computed 是有缓存的，只要rmb没有变化，dollar 会直接返回以前计算出来的值，而不会再次计算。 这样如果是复杂计算，就会节约不少时间。
而methods每次都会调用