Vue3——computed计算属性

computed计算属性的作用

computed作用:根据以有数据计算出新数据（和vue2的computed的作用一样）

特点：

1. 只要值一改变，就重新计算，如果没变，则使用缓存中计算出来的值
2. 与函数作对比，在模板中多次使用，计算属性的只会执行一次，有缓存。而函数会执行多次，无缓存。

俩种使用方式

• computed计算属性只读取，不修改
• computed计算属性既读取又修改

computed计算属性只读取，不修改

运行结果

代码

  <template>
    <div class="root">
      姓：<input type="text" v-model="xing"><br>
      名：<input type="text" v-model="ming"><br>
      姓名：<span>{{ name }}</span><br>
      姓名：<span>{{ name }}</span><br>
      姓名：<span>{{ name }}</span><br>
      姓名：<span>{{ name }}</span><br>

      姓名：<span>{{ getName() }}</span><br>
      姓名：<span>{{ getName() }}</span><br>
      姓名：<span>{{ getName() }}</span><br>
      姓名：<span>{{ getName() }}</span><br>
    </div>
  </template>

<!--Vue 3 setup语法糖 -->
<script setup lang='ts' name="App">
import { computed, ref } from 'vue';

let xing = ref("");
let ming = ref("");

//computed计算属性只读取，不修改
/*
特点：
    1.只有xing和ming一改变，就重新计算
    2.在模板中多次使用，也只会执行一次，是有缓存的。如果是使用函数来实现，则会执行多次函数
*/
let name = computed(() => {
  console.log("computed()执行了。。。");

  return xing.value + "\t" + ming.value;
})

function getName() {
  console.log("getName()函数执行了。。。");
  return xing.value + "\t" + ming.value;
}
</script>

<style scoped>
.root {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

.roles {
  background-color: rgb(211, 216, 218);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

h2 {
  width: 1000px;
}

button {
  margin: 0 5px;
}

div {
  margin: 10px;
}
</style>

computed计算属性既读取又修改

运行结果

代码

  <template>
    <div class="root">
      姓：<input type="text" v-model="xing"><br>
      名：<input type="text" v-model="ming"><br>
      姓名：<span>{{ name }}</span><br>
      <button @click="changeName">更改姓名name</button>
    </div>
  </template>

<!--Vue 3 setup语法糖 -->
<script setup lang='ts' name="App">
import { computed, ref } from 'vue';

let xing = ref("");
let ming = ref("");

//computed计算属性既读取，又修改

let name = computed({
  //读取
  get() {
    return xing.value + "\t" + ming.value;
  },
  //修改
  set(val) {
    console.log("值被修改了。。。");
    ming.value = val.split("\t")[0];
    xing.value = val.split("\t")[1];
  }

})

function changeName() {
  name.value = "么" + "\t" + "么";
}
</script>

<style scoped>
.root {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

.roles {
  background-color: rgb(211, 216, 218);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

h2 {
  width: 1000px;
}

button {
  margin: 0 5px;
}

div {
  margin: 10px;
}
</style>