Vue3学习(4)- computed的使用

1. 简述与使用

作用:computed 用于基于响应式数据派生出新值,其值会自动缓存并在依赖变化时更新。

  • 缓存机制:依赖未变化时直接返回缓存值,避免重复计算(通过 _dirty 标志位实现)。
  • 响应式更新:依赖数据变更时触发重新计算(通过 Vue 的 effect 依赖追踪系统)。

如下图片:

javascript 复制代码
<template>
  <div class="person">
    姓:<input type="text" v-model="firstName"> <br>
    名:<input type="text" v-model="lastName"> <br>
    全名:<span>{{fullName}}</span> <br>
    <button @click="changeFullName">全名改为:li-si</button>
  </div>
</template>

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

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

  // 计算属性------只读取,不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */


  // 计算属性------既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })

  function changeFullName(){
    fullName.value = 'li-si'
  } 
</script>

2. 与 methods 的区别

  • 缓存: computed 依赖不变时复用结果,methods 每次调用重新执行;
  • 使用场景:computed 纯数据派生(如过滤、聚合),methods 事件处理或需主动触发的逻辑;
  • 模板调用:computed 直接引用(如 {``{ value }}),methods 需调用(如 {``{ fn() }})

3. 使用方法详解

3.1 ​基础写法(只读)​

传入 ​getter 函数,返回只读的 Ref 对象:

javascript 复制代码
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const double = computed(() => count.value * 2); // 自动追踪 count 依赖
</script>

适用场景​:模板中简化复杂表达式(如数据格式化、条件判断)。

3.2 完整写法(可读写)

传入包含 ​get/set 的对象,支持双向绑定:

javascript 复制代码
<template>
  <div class="person">
    姓:<input type="text" v-model="firstName">
    名:<input type="text" v-model="lastName">
    <p>{{ fullName }}</p>
  </div>
</template>
<script lang="ts">
export default {
  name: "Person"
}
</script>

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

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed({
  // 写法1
  // get: () => {
  //   return firstName.value+" "+lastName.value
  // },
  get: () => `${firstName.value} ${lastName.value}`,
  set: (newValue) => {
    [firstName.value, lastName.value] = newValue.split(' ');
  }
});
// 修改 fullName 会触发 set 方法
fullName.value = 'Jane Smith';
</script>
<style scoped lang=less>
</style>

适用场景​:v-model 绑定派生数据(如表单联动)

3.3 传递参数

需在计算属性内部返回函数​:

javascript 复制代码
<template>
  <div class="person">
    <div>
      <div v-for="item in filterList(3)" :key="item">{{item}}</div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Person"
}
</script>

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

const list = ref([1, 2, 3]);
//值传递
const filterList = computed(()=> (max) => list.value.filter((item) => item < max));

</script>
<style scoped lang=less>
</style>
相关推荐
一只小阿乐13 小时前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
IT教程资源C16 小时前
(N_156)基于springboot,vue小区物业管理系统
mysql·vue3·前后端分离·springboot小区物业
Sheldon一蓑烟雨任平生5 天前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
麦麦大数据5 天前
D026 vue3+django 论文知识图谱推荐可视化系统 | vue3+vite前端|neo4j 图数据库
前端·django·vue3·知识图谱·推荐算法·论文文献·科研图谱
duansamve6 天前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
JNU freshman6 天前
Element Plus组件
前端·vue.js·vue3
Sheldon一蓑烟雨任平生9 天前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
duansamve10 天前
TS在Vue3中的使用实例集合
typescript·vue3
ღ᭄ꦿ࿐Never say never꧂10 天前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
Sheldon一蓑烟雨任平生10 天前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style