Why

计算属性在Vue里面还是特别常见的，正好学习到了，记录一下。

How

在最新的语法中，可以直接使用关键字computed，本身就是一个函数，以下是简单的举例。

<script lang="ts" setup>

import { ref } from 'vue';

import { computed } from 'vue';

  


  
  

let msg = ref({

  name: "Test",

  age: 18,

  phone: 1515,

  address: "湖北省武汉市"

})

  

function changePhone() {

  msg.value.phone = 4545;

}

  

function changeName() {

  msg.value.name = "454545";

}

  

function changeAge() {

  msg.value.age += 1;

}

  

let firstName = ref("");

let lastName = ref("");

  
  
let fullName1 = computed(() => {

  return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value;

})

const fullName = computed({

  

  get() {

    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value;

  },

  set(val) {

    let arr = val.split('-');

    firstName.value = arr[0].slice(0, 1).toLowerCase() + arr[0].slice(1);

    lastName.value = val.split('-')[1]

  }

}

  

)

  

function changeFullName() {

  fullName.value = "Li-si";

}

  

function getFullname() {

  console.log(firstName.value, lastName.value);

  return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value;

}

  

</script>

  

<template>

  <div>


    <input type="text" placeholder="姓" v-model="firstName" />

    <br />

    <input type="text" placeholder="名" v-model="lastName" />

    <br />

    全名:<span>{{ fullName }}</span><br />

    全名1:<span>{{ getFullname() }}</span>

  

    <br />

    <button @click="changeFullName">修改全名</button>

  

  </div>

</template>

  

<style scoped></style>

上述演示了两种方法，其中fullName1是只有get属性的，无法在后续对它进行赋值操作。如果想要赋值操作，则需要按照fullName写。（其实很类似C#的属性的写法，比较容易理解）
其中v-model表示的是双向绑定，如果是使用:value的话，页面的数据变化是没办法传递到代码的。
计算属性是存在缓存的，也就是当页面元素不变化的时候，如果调用多次计算属性的时候其实只有一次的计算。但是如果是函数的话，例如getFullname，则是有多少次就调用函数多少次，这在性能上面其实是很关键的。
字符串的分割操作slice，我还是第一次使用。。。。

Tips

某些方面真的感觉vue比C#更便利一些。

目录CONTENT

Vue计算属性

Why

How

Tips