computed计算属性

computed计算属性

作用：根据已有数据计算出新数据（和Vue2中的computed作用一致），其也是一个ref类型的变量。

参考代码：

<template>
  <div class="person">
    姓: <input type="text" v-model="firstName"><br>
    名: <input type="text" v-model="lastName"><br>
    <!-- 这样编写较为复杂 -->
    <!-- 全名: <span>{{firstName.slice(0, 1).toUpperCase() + firstName.slice(1)}}-{{lastName}}</span> -->
    全名: <span>{{fullName}}</span><br>
    全名: <span>{{fullName}}</span><br>
    全名: <span>{{fullName}}</span><br>
    全名: <span>{{fullName}}</span>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { ref, computed } from 'vue';

  let firstName = ref('zhang');
  let lastName = ref('san');

  //这种编写的计算属性是const的 所以不能 fullName = xxx, 但是我们可以通过修改其依赖的变量的改变使其重新计算
  // let fullName = computed(() => { //计算属性即使在template中多次使用也只会执行一次
  //   console.log(1)
  //   return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
  // });

  //这么定义的计算属性fullName是 可读可写的
  let fullName = computed({
    get(){
      console.log('get');
      return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
    },
    set(val) {
      console.log('set', val);
      // 有了set方法就可以设置对应的值了, 并且可以通过参数获取到传递过来的值, 重新赋值给需要计算的属性就可以引起修改
      const [str1, str2] = val.split('-');
      firstName.value = str1;
      lastName.value = str2;
    }
  })
</script>

<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>