VUE计算属性 computed

一个数据，依赖另外一个数据计算而来的结果

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

<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>

</style>

计算属性也是vue数据变量，所有不要和data里面重名，用法和data相同

一个数据，依赖另一个 一些数据计算而来的结果

 

vue计算属性-缓存

1. 计算属性的优势  带缓存

2. 计算属性对应函数执行后 ，会把return值缓存起来
3. 依赖项不变，多次调用都是从缓存中取值
4. 依赖项值-变化 ，函数会“自动重新执行-并缓存新的值”

 

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello,Vue",
    };
  },
  computed: {
    //计算属性的优势
    // 带缓存
    // 计算属性对应函数执行后，会把return值缓存起来
    // 依赖项不变，多次调用都是从缓存取值
    // 依赖项值-变化，函数会“自动重新执行-并缓存新的值”
    reverseMessage() {
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("");
    },
  },
  methods: {
    getMessage() {
      console.log("函数执行了");
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>

计算属性只执行一次 从缓存中拿数据

vue计算属性-完整写法

给 计算属性赋值 触发set方法

使用 计算属性的值 触发get方法

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

 

<template>
  <div>
    <span>姓名：</span>
    <input type="text" v-model="full" />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  // 计算属性完整写法
  computed: {
    full: {
      // 给full赋值 触发get方法
      set(val) {
        console.log(val);
      },
      // 使用full的值 触发get方法
      get() {
        return '牛马dzq'
      },
    },
  },
};
</script>