Vue3基础(九)___computed

computed

computed(函数)

<template >
  <div class="container">
    <p>{{obj.name}}的年龄是{{obj.age}}</p>
    <p>{{obj2.name}}的年龄是{{obj2.age}}</p>
    <p>{{obj.name}}和{{obj2.name}}的年龄和为{{computedObj}}</p>
    <button @click="changeAge">惦记我改变{{obj.name}}的年龄</button>
  </div>
</template>
<script>
import { ref, computed } from "vue";
export default {
  setup() {
    let obj = ref({ name: "zjq", age: 18 });
    let obj2 = ref({ name: "zrh", age: 23 });
    let computedObj = computed(() => obj.value.age + obj2.value.age);
    function changeAge() {
        obj.value.age +=1
    }
    return { obj, obj2, computedObj ,changeAge};
  }
};
</script>
<style  scoped>
</style>

点击按钮后，zjq的年龄+1，他们两个的年龄和+1,达到了我们想要的效果。

并且有一个特点，我们使用computed传递函数的形式返回的computedObj 是只读的数据，我们是修改不了的。

computed(对象)

<template >
  <div class="container">
    <p>{{obj.name}}的年龄是{{obj.age}}</p>
    <p>{{obj2.name}}的年龄是{{obj2.age}}</p>
    <p>{{obj.name}}和{{obj2.name}}的年龄和为{{computedObj}}</p>
    <button @click="changeAge">惦记我改变{{obj.name}}的年龄</button>
  </div>
</template>
<script>
import { ref, computed } from "vue";
export default {
  setup() {
    let obj = ref({ name: "zjq", age: 18 });
    let obj2 = ref({ name: "zrh", age: 23 });
    // 使用具有 get 和 set 函数的对象来创建可写的 ref 对象
    const computedObj = computed({
      get: () => obj.value.age + obj2.value.age,  //41  42  65
      set: val => {
        obj.value.age = val - 1;  //42
      }
    });
    function changeAge() {
      obj.value.age++;  //19
      computedObj.value++ ; //43
    }
    return { obj, obj2, computedObj, changeAge };
  }
};
</script>
<style  scoped>
</style>

使用具有 get 和 set 函数的对象来创建可写的 ref 对象；
使用computed(对象)返回的是一个ref响应数据，可以对他的值进行改变，需要.value改变，数据是可以改写的。
默认：

点击按钮后

点击按钮后：
1：obj.value.age++; 自加1 =》》》19
触发computed get=》改变年龄之和computedObj 42
2：computedObj.value++ ; 年龄之和自加1=》》》43
触发computed set=》obj.value.age = val - 1; 传入43-1 =42；
3：obj.value.age数值改变，触发computed get=》改变年龄之和computedObj 65