当前位置：首页 > news >正文

uni-app学习笔记十--vu3 computed的运用(一)

news 来源：原创 2025/5/25 12:22:55

vue官方推荐使用计算属性来描述依赖响应式状态的复杂逻辑，computed具有缓存的作用，一个计算属性仅会在其响应式依赖更新时才重新计算，这意味着只要相关值不改变，无论多少次访问都会立即返回先前的计算结果，从而在一定程度上提升性能。

使用示例：

使用前需引入：

import {computed} from "vue"

<template><view class="out"><input type="text" v-model="firstName" placeholder="请输入名字" /><input type="text" v-model="lastName" placeholder="请输入姓氏" /><view>全称：{{fullName}}</view></view>
</template><script setup>import {ref,computed} from "vue"const firstName=ref("")const lastName=ref("")const fullName = computed(()=>firstName.value+"·"+lastName.value)
</script><style lang="scss" scoped>.out{padding:20px;input{height: 40px;border: 1px solid #ccc;margin: 10px 0;padding: 0 10px;}}    
</style>

当computed要执行的代码比较简单时，可简写为上面的箭头函数的方式。computed在一定程度上跟ref相似，所不同的ref可重新赋值，而computed的变量为可读，最好不要去修改computed的变量的值，computed和函数实现的效果完全相同，两者的区别主要体现在函数没有缓存，每次都会执行，而computed在满足条件时会读取缓存而不重复执行。