vue计算属性—computed

想要了解vue知识可以查看vue基础学习目录，在不定时更新中~

概念：
一个数据, 依赖另外一些数据计算而来的结果
语法:

```javascript
 computed: {    
 "计算属性名" () {        
     return "值"    
 }}
```

例：

• 需求: 求2个数的和显示到页面上

  <template>
    <div>
      <p>{{ num }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return {
        a: 10,
        b: 20
      }
    },
    // 计算属性:
    // 场景: 一个变量的值, 需要用另外变量计算而得来
    /*
      语法:
      computed: {
        计算属性名 () {
          return 值
        }
      }
    */
   // 注意: 计算属性和data属性都是变量-不能重名
   // 注意2: 函数内变量变化, 会自动重新计算结果返回
    computed: {
      num(){
        return this.a + this.b
      }
    }
  }
  </script>
  
  <style>
  
  

vue计算属性-缓存

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果