vue3中的computed属性

模板界面：

<template>
  <div class="person">
    <h2>姓： <input type="text" v-model="person.firstName" /></h2>
    <h2>名： <input type="text" v-model="person.lastName" /></h2>
    <button @click="changeFullName">修改全名</button>
    <h2>
      全名：<label>{{ fullName }}</label>
    </h2>
    <h2>
      全名：<label>{{ fullName }}</label>
    </h2>
  </div>
</template>

计算属性的使用：
 

<script setup name="computedName">

import {reactive,toRefs,computed} from 'vue'

const person = reactive({firstName:'张',lastName:'三'})

const {firstName,lastName} = toRefs(person)
// 计算属性 默认是只读的 有缓存
// const fullName = computed(() =>{
//     console.log("1");
//     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0).toLowerCase()
// })

// 计算属性 默认是只读的 有缓存
const fullName = computed({
    get(){
        console.log("1");
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0).toLowerCase()
    },
    set(val){
        console.log("2");
       console.log('set',val);
       const [str1,str2] = val.split('-')
       firstName.value = str1
       lastName.value = str2
    }
})

//该方法只是引起computed 中 set方法的调用
function changeFullName(){
    fullName.value = 'aaa-bbb'
    console.log(fullName.value);
}
</script>

样式：

<style scoped>
.person {
  background-color: #ccc;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>

注意：computed包含缓存，与方法不同，并且computed可以赋新值

原文地址：https://blog.csdn.net/qq_58341172/article/details/142883070

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！